JS without backend implementation click load to view more (prompt SEO friendly)

In order to prompt SEO friendlyness and avoid the burden on the server by calling the backend interface, you can use js backend to click load to view more. For example, there are 60 records in the source code in HTML, 20 records are displayed in advance, click "See More" to add 10 at a time, and after the last time, the button text is changed to "View All".

In JavaScript, you can use the following steps to achieve click to see more functions:

• Determines the elements that trigger the click event and the list of articles to be displayed.

• Bind an event listener for the click event.

• In the event handler function, add the originally hidden article list to the page.

Simple example

Here is a sample code that simply implements this function:

HTML part

<button >See more</button>
<div >
    <!-- Here is the original hidden article list，Before the initial display5strip -->
    <div>article1</div>
    <div>article2</div>
    <div>article3</div>
    <div>article4</div>
    <div>article5</div>
    
    <!-- 隐藏的article列表，Click the button to display -->
    <div style="display:none;">article6</div>
    <div style="display:none;">article7</div>
    <div style="display:none;">article8</div>
    <div style="display:none;">article9</div>
    <div style="display:none;">article10</div>
</div>

JavaScript Part

('viewMoreButton').addEventListener('click', function() {
    var articleList = ('articleList');
    var hiddenArticles = ('[style*="display:none"]');
    
    // Show hidden articles    for (var i = 0; i < ; i++) {
        hiddenArticles[i]. = 'block';
    }
    
    // You can select to remove the button or change the button text afterwards    (); // Remove button    // or     = 'Viewed all';
});

In this example, the first 5 articles are displayed initially, and the hidden article list will be displayed after clicking the button, and you can choose whether to remove the button or change the button text.

Expand and optimize

HTML hidden list issue

More than 10 hidden lists of css implementations

#articleList div:nth-child(n+11) {
  display: none;
}

Why don't the above method be used in html, but use style="display:none;" to hide the list. Because when traversing for JS, use style="display:none;" to mark hidden lists.

You can click "See More" multiple times

The number of lists in HTML is higher, the js code is as follows

('viewMoreButton').addEventListener('click', function() {
    var articleList = ('articleList');
    var hiddenArticles = ('[style*="display:none"]');
    var hiddennum = ;
    var num = 10;
    if (hiddennum==0){
        alert('No more');
    } else {
        if (hiddennum<=10) {
            num = hiddennum;
             = 'Viewed all';
        }
        for (var i = 0; i < num; i++) {
            hiddenArticles[i]. = 'block';
        }
    }
});

Summarize

This is the article about js backendless implementation click load to view more (prompt SEO friendly). For more related js backendless implementation, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!