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

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:

Please accept marketing cookies to load this content.

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.

1	<div id="card-container"></div>

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.

<div class="card-actions">
  <button id="load-more">Load more</button>
  <span>Showing 
    <span id="card-count"></span> of 
    <span id="card-total"></span> cards      
  </span>
</div>

2. Styling the Cards and Button

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

#card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  height: 55vh;
  width: calc((100% / 3) - 16px);
  margin: 8px;
  border-radius: 3px;
  transition: all 200ms ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

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.

.card-actions {
  margin: 8px;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#load-more {
  width: calc((100% / 3) - 8px);
  padding: 16px;
  background-color: white;
  border: none;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  border-radius: 3px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
}

#load-more:not([disabled]):hover {
  box-shadow: 0 1px 9px rgba(0, 0, 0, 0.2);
}

#load-more[disabled] {
  background-color: #eaeaea !important;
}

3. Adding Functionality With JavaScript

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

Define a number of cards to be added to the page each time the user clicks the button.
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:

1	const cardContainer = document.getElementById("card-container");
2	const loadMoreButton = document.getElementById("load-more");
3	const cardCountElem = document.getElementById("card-count");
4	const cardTotalElem = document.getElementById("card-total");

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.

1	const cardLimit = 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;

1	cardTotalElem.innerHTML = cardLimit;

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

1	const cardIncrease = 9;

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.

1	const pageCount = Math.ceil(cardLimit / cardIncrease);

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

1	let currentPage = 1;

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.

How to Generate Random Background Colors With JavaScript

Jemima Abu

31 May 2021

const getRandomColor = () => {
  const h = Math.floor(Math.random() * 360);

  return `hsl(${h}deg, 90%, 85%)`;
};

const createCard = (index) => {
  const card = document.createElement("div");
  card.className = "card";
  card.innerHTML = index;
  card.style.backgroundColor = getRandomColor();
  cardContainer.appendChild(card);
};

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

1	window.onload = function () {
2	loadMoreButton.style.backgroundColor = getRandomColor();
3	};

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.

How to Implement Infinite Scrolling With JavaScript

Jemima Abu

08 Jul 2022

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:

const addCards = (pageIndex) => {
  currentPage = pageIndex;
  
  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = pageIndex * cardIncrease;
  
  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

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:

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

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.

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;
  
  cardCountElem.innerHTML = endRange;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

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:

const handleButtonStatus = () => {
  if (pageCount === currentPage) {
    loadMoreButton.classList.add("disabled");
    loadMoreButton.setAttribute("disabled", true);
  }
};

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

const addCards = (pageIndex) => {
  currentPage = pageIndex;

  handleButtonStatus();

  const startRange = (pageIndex - 1) * cardIncrease;
  const endRange =
    pageIndex * cardIncrease > cardLimit ? cardLimit : pageIndex * cardIncrease;
  
  cardCountElem.innerHTML = endRange;

  for (let i = startRange + 1; i <= endRange; i++) {
    createCard(i);
  }
};

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.

1	window.onload = function () {
2	addCards(currentPage);
3	loadMoreButton.style.backgroundColor = getRandomColor();
4	};

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.

window.onload = function () {
  addCards(currentPage);
  loadMoreButton.style.backgroundColor = getRandomColor();
  loadMoreButton.addEventListener("click", () => {
    addCards(currentPage + 1);
  });
};

Conclusion

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

Please accept marketing cookies to load this content.