7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. JavaScript

How to Implement a “Load More” Button With Vanilla JavaScript

Scroll to top
Read Time: 7 mins

We’ve covered Pagination and Infinite Scrolling in previous tutorials. On this occasion, we’ll be looking at another method of controlling how content is displayed on a page: using a “Load More” button.

A “Load More” button adds more content to a page when clicked by a user. This is a common approach for blogs as it allows the user to decide how and when information is displayed. 

Here’s a look at the final product we’ll work on today—scroll to the bottom of the pen and click the button to add more content to the page:

1. Card Container and Button HTML

We’ll start by placing the container for our cards on the page. We’ll be adding the cards to the container using JavaScript so the div will be empty.

Our implementation includes a “load more” button and also displays the current number of cards being shown and the total number of cards available. We’ll include these features in a card-actions div. The content in card-count and card-total will be added with JavaScript.

2. Styling the Cards and Button

The cards we’ll be adding to the card-container div will have a classname of “card”. 

We’ll style our load-more button in a similar manner to the cards and add a disabled pseudo-selector to show when the end of the cards have been reached.

3. Adding Functionality With JavaScript

This is what the functional implementation for the load more button will look like:

  1. Define a number of cards to be added to the page each time the user clicks the button.
  2. Detect when the total number of cards have been added and disable the button.

Defining Constants

First, get all the elements we’ll need from our DOM:

Now we need to define our global variables.

We’ll need a value for the max number of cards to be added to the page. If you’re getting your data from a server, this value is the length of the response from the server. Let’s initialise a card limit of 99. 

The cardTotalElem is the element for displaying the max number of cards on the page so we can set the innerHTML to the cardLimit value;

Then we’ll define a variable for how many cards we want to increase the page by:

Much like with our infinite scrolling tutorial, we’ll want to know how many “pages” we’ll have i.e. how many times can we increase the content till we reach the max limit. For example, with our defined cardLimit and cardIncrease variables, we can increase the content 10 times (assuming we’ve already loaded the first 9 elements) until we reach the limit. We’ll do this by dividing the cardLimit by the cardIncrease.

Then we’ll define a value to determine which page we’re on:

Creating a New Card

Now we have all our constants, let’s make a function to add a new card to the card container. We’ll set the innerHTML of our cards to the index value so we can keep track of the number of cards we’re adding.

A fun feature in this demo is that each card has a randomly generated background color.

We can also apply this function to our load-more button on page load to give it a random background color as well:

Adding Cards to the Container

We’ll add our cards to our container using a similar functionality to what we used in the Infinite Scrolling tutorial.

First, determine the range of cards to be added to the page. The addCards function will accept a pageIndex parameter, which will update the global currentPage value. If we’re on page 1, we’ll add cards 1 to 9. If we’re on page 2, we’ll add cards 10 to 18 and so on.

We can define that mathematically as:

In this function, our start range will always be one less than the value we’re trying to get (i.e. on page 1, the start range is 0, on page 2, the start range is 9) so we’ll account for that by setting the value of our for loop index to startRange + 1.

Detecting When Card Limit is Reached

A limit we’ll have to look out for is the endRange number. If we’re on the last page, we’ll want our end range to be the same as the cardLimit. For instance, if we have a cardLimit of 75 and a cardIncrease of 10 and we’re on page 8, our startRange will be 70 and our endRange value should be 75. 

We’ll modify our addCards function to account for this:

Our demo also includes a cardTotal element that displays the number of cards currently being shown on the page so we’ll set the innerHTML of this element as the end range.

Another thing to look out for is disabling the load more button when the cardLimit is reached. We can define a handleButtonStatus function to determine whether to disable the button i.e. when the currentPage is equal to the cardLimit:

We’ll then pass this new function into our addCards function:

Loading Initial Cards

We’ve defined a feature for adding cards to the container so we’ll update our window.onload function to set the initial cards to be added to the page.

Handling Load More

We’ll handle adding the content by increasing the currentPage number by 1 every time the load more button is clicked. Since we’ve already added all the limit checks in our addCards function, we won’t need to do any other check within our click event.

Conclusion

And we’re done! We’ve successfully implemented a “Load More” button feature on our web page!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.