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

Here’s a have a look at the ultimate product we’ll work on today—scroll to the underside of the pen and click on the button so as 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 shall be empty.

Our implementation features a “load more” button and in addition displays the present variety of cards being shown and the entire variety of cards available. We’ll include these features in a card-actions div. The content in card-count and card-total shall be added with JavaScript.

2. Styling the Cards and Button

The cards we’ll be adding to the card-container div may 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 the same manner to the cards and add a disabled pseudo-selector to indicate when the top 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 !necessary;
}

3. Adding Functionality With JavaScript

That is what the functional implementation for the load more button will appear like:

1. Define quite a few cards to be added to the page every time the user clicks the button.
2. Detect when the entire variety of cards have been added and disable the button.

Defining Constants

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

const cardContainer = document.getElementById(“card-container”);
const loadMoreButton = document.getElementById(“load-more”);
const cardCountElem = document.getElementById(“card-count”);
const cardTotalElem = document.getElementById(“card-total”);

Now we want to define our global variables.

We’ll need a price for the max variety of cards to be added to the page. In case 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. 

const cardLimit = 99;

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

cardTotalElem.innerHTML = cardLimit;

Then we’ll define a variable for the way many cards we wish to extend the page by:

const cardIncrease = 9;

Very like with our infinite scrolling tutorial, we’ll wish to understand how many “pages” we’ll have i.e. how persistently can we increase the content till we reach the max limit. For instance, with our defined cardLimit and cardIncrease variables, we will increase the content 10 times (assuming we’ve already loaded the primary 9 elements) until we reach the limit. We’ll do that by dividing the cardLimit by the cardIncrease.

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

Then we’ll define a price to find out which page we’re on:

let currentPage = 1;

Making a Latest Card

Now we’ve all our constants, let’s make a function so as to add a latest card to the cardboard container. We’ll set the innerHTML of our cards to the index value so we will keep track of the variety of cards we’re adding.

A fun feature on this demo is that every card has a randomly generated background color.

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 may apply this function to our load-more button on page load to present it a random background color as well:

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

Adding Cards to the Container

We’ll add our cards to our container using the same functionality to what we utilized 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 is able to update the worldwide 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 forth.

We are able to 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); } };

On this function, our start range will at all times be one lower than the worth we’re attempting to get (i.e. on page 1, the beginning range is 0, on page 2, the beginning range is 9) so we’ll account for that by setting the worth of our for loop index to startRange + 1.

Detecting When Card Limit is Reached

A limit we’ll should look out for is the endRange number. If we’re on the last page, we’ll want our end range to be similar to the cardLimit. As an example, if we’ve a cardLimit of 75 and a cardIncrease of 10 and we’re on page 8, our startRange shall be 70 and our endRange value must 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 features a cardTotal element that displays the variety of cards currently being shown on the page so we’ll set the innerHTML of this element as the top 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); } };

One other thing to look out for is disabling the load more button when the cardLimit is reached. We are able to define a handleButtonStatus function to find out whether to disable the button i.e. when the currentPage is the same as the cardLimit:

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

We’ll then pass this latest 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.

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

Handling Load More

We’ll handle adding the content by increasing the currentPage number by 1 each time the load more button is clicked. Since we’ve already added all of the limit checks in our addCards function, we won’t must do every other check inside 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!