Adding a Load More Button to your Content


This article will show you how to display more content while providing an improved user experience by utilizing a Load More button.

Adding a Load More Button to your Content

Showcasing your content on the web is more essential than ever. However, there's so much content and only so much real estate on a web page before the viewer stops scrolling. Web designers and developers have recognized this behavior in website visitors and have implemented different techniques to display content in the most intuitive way while still providing the volume of content some visitors may require.

Your blog may have 1,000 entries but you don't want to show all of them on a single page or it will take an extremely long time to load and cause an information overload that may even increase your bounce rates. In the case of these 1,000 entries developers would likely "lazy load" any entries over a certain integer. In our example, we don't have 1,000 entries so a simple "Load More" and some JavaScript will suffice.

Below is the HTML, CSS, and JavaScript required.

Step 1 - load-more-button.html

Copy and paste the code below into load-more-button.html


Step 2 - load-more-button.css

Download the CSS below and include it in your web page

 load-more-button.css

Step 3 - load-more-button.js

Copy and paste the code below into load-more-button.js


Step 4 - Add the includes below to your web page

In this tutorial we showed you how to add a "Load More" button to your content that displays additional content when clicked. Now you can customize the design and make it your own!

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.