Home Web Design CSS Load More Feature With HTML & CSS Only | Example and Source...

Load More Feature With HTML & CSS Only | Example and Source Code

April 13, 2019

25470

Load More Feature With HTML & CSS Only Example and Source Code. You must have seen load more buttons before. Many websites use this feature of a clean look, they hide their content when you click on load more button, then the content will appear. This is a pretty cool feature you must use on your website.

This type of Load More feature can be done with JavaScript, JQuery or any javascript library. In WordPress, this is a common theme feature. Now the question is that, how can we create this program with only HTML & CSS. Yes, you hear right. You can create a Load More program in pure HTML and CSS.

I know this program will be very simple, as you know I always share simple stuff because they are easy to understand. But if you are a beginner or want to learn from scratch, then you are in the right place. Many people create this on JavaScript but they can’t do with pure CSS. Then this post also for those people.

Preview Of This Load More Program

First see a preview of this program, before getting the source code.

https://webdevtrick.com/wp-content/uploads/html-css-load-more.mp4?_=1

Now you got an idea about how will be this program looks. You can set this feature in your websites home page or portfolio page etc. Once you get source code then you can fully understand hows this program run. Then you can customize the whole program as you want.

HTML & CSS Load More Feature Source Code

Before sharing source code, I want to say a little bit about this program. This feature work with the help of CSS. I used an external CSS library called ‘Normalized’ (know about normalized CSS Library). As you can see above in preview video the blue boxes, I created these with HTML <li> ><ul> tag. You can use these <div> also. The in CSS by default hide some % of elements when you click on ‘load more’ button the height will be increase. Then we can see all the elements.

You have to create 2 files for this simple program. On for HTML, and other for CSS.

index.html

Create a file named ‘index.html‘ and any name as you want, and copy these codes given below & paste there.

<!DOCTYPE html>
<!-- Code By WebDevTrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>Load More Content - HTML & CSS Only | Webdevtrick.com</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

      <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <div class="load-more-container">
  <input type="checkbox" id="load-more"/>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
	<li></li>
    <li></li>
    <li></li>
    <li></li> 
  </ul>
  <label class="load-more-btn" for="load-more">
    <span class="unloaded">LOAD MORE</span>
    <span class="loaded">VIEW LESS</span>
  </label>  
</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Load More Content - HTML & CSS Only | Webdevtrick.com</title>

</head>

<body>

<ul>

</ul>

</label>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/* Code By WebDevTrick ( https://webdevtrick.com ) */
body {
  background: #333;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.load-more-container {
  background: #fff;
  width: 500px;
  min-height: 500px;
  margin: 20px auto;
  position: relative;
}
.load-more-container ul {
  list-style-type: none;
  padding: 0;
}
.load-more-container ul:after {
  content: "";
  display: table;
  clear: both;
}
.load-more-container ul li {
  width: calc(25% - 10px);
  margin: 10px 5px 0;
  height: 100px;
  background:  #1D95F8;
  color: #fff;
  float: left;
  border-radius: 2px;
}
.load-more-container ul li:nth-child(1n + 5) {
  max-height: 0;
  opacity: 0;
  transition: 0.1s ease-in;
}
.load-more-container .load-more-btn {
  width: 150px;
  line-height: 40px;
  border-radius: 2px;
  margin: 0 auto;
  display: block;
  background:   #494747;
  color: #fff;
  cursor: pointer;
  text-align: center;
}
.load-more-container .load-more-btn:hover {
  background: #333;
}
.load-more-container .load-more-btn .loaded {
  display: none;
}
.load-more-container #load-more {
  display: none;
}
.load-more-container #load-more:checked ~ ul li:nth-child(1n + 5) {
  max-height: 999px;
  opacity: 1;
  transition: 0.2s ease-in;
}
.load-more-container #load-more:checked ~ .load-more-btn .loaded {
  display: block;
}
.load-more-container #load-more:checked ~ .load-more-btn .unloaded {
  display: none;
}

/* Code By WebDevTrick ( https://webdevtrick.com ) */

body {

background: #333;

}

*, *:before, *:after {

box-sizing: border-box;

}

.load-more-container {

background: #fff;

width: 500px;

min-height: 500px;

margin: 20px auto;

position: relative;

}

.load-more-container ul {

list-style-type: none;

padding: 0;

}

.load-more-container ul:after {

content: "";

display: table;

clear: both;

}

.load-more-container ul li {

width: calc(25% - 10px);

margin: 10px 5px 0;

height: 100px;

background: #1D95F8;

color: #fff;

float: left;

border-radius: 2px;

}

.load-more-container ul li:nth-child(1n + 5) {

max-height: 0;

opacity: 0;

transition: 0.1s ease-in;

}

.load-more-container .load-more-btn {

width: 150px;

line-height: 40px;

border-radius: 2px;

margin: 0 auto;

display: block;

background: #494747;

color: #fff;

cursor: pointer;

text-align: center;

}

.load-more-container .load-more-btn:hover {

background: #333;

}

.load-more-container .load-more-btn .loaded {

display: none;

}

.load-more-container #load-more {

display: none;

}

.load-more-container #load-more:checked ~ ul li:nth-child(1n + 5) {

max-height: 999px;

opacity: 1;

transition: 0.2s ease-in;

}

.load-more-container #load-more:checked ~ .load-more-btn .loaded {

display: block;

}

.load-more-container #load-more:checked ~ .load-more-btn .unloaded {

display: none;

}

That’s It. Now you have successfully created Load More Feature In Only HTML & CSS. If you have any doubt or question you can comment down below.

Thanks For Visiting, Keep Visiting.

17 COMMENTS

Volkan April 14, 2019 At 10:37 am

Wow I love it. POWER OF HTML & CSS!

Reply
- shaan April 14, 2019 At 4:33 pm
  
  thank you
  
  Reply
Lars April 14, 2019 At 12:20 pm

It is a nice tutorial. But technically I’d rather consider this a “show more” than a “load more”. A “proper” load more script acquires the extra content with an own request to the server. It is a nice trick for a sleeker website but not a bandwidth safer.

Reply
LJ April 14, 2019 At 2:23 pm

The title should be “Show More Feature… ” because usually when you say Load More it means you are going to load extra data from a source but here, everything is technically loaded you are just showing more things 🙂
Unless you mean the illusion of loading more but for developers just the illusion is pretty useless
Still, thanks for sharing your knowledge

Reply
Marcel Hartmann April 14, 2019 At 3:26 pm

Very cool way in CSS but didn’t we want to do that in JavaScript to only load the invisible content after the user want it by clicking on the button? Like Facebook only load the content visible by view port? Where is the benefit from this in this context?

Kind regards, Marcel

Reply
John April 14, 2019 At 4:09 pm

Nice code but where do you put the images or other thing you want tot show? Nu

Reply
Vagelis April 14, 2019 At 5:44 pm

That’s show more not load more as the initial load will get all content. With that set worth to mention that there is no speed benefit from that at all.

Reply
- shaan April 14, 2019 At 6:15 pm
  
  hey buddy, sorry. but on websites, its called load more. thank you for you comment.
  
  Reply
  - Chris April 14, 2019 At 8:22 pm
    
    Sry, but no. It is show more. Load more means load extra data from a backend. So get data from a server. As you can see some more comments about it. Show more means exactly what you created. Not more. The data ist still there but hidden. Loading is different from showing. The title is wrong.
    
    Reply
    - shaan April 15, 2019 At 1:09 am
      
      hey sorry for this misconception, you can check my other content. thank you
      
      Reply
Sunny Kumar April 14, 2019 At 5:58 pm

Wow I love it. POWER OF HTML & CSS!

Reply
- shaan April 14, 2019 At 6:13 pm
  
  thank you very much
  
  Reply
free data recovery software download April 23, 2019 At 4:10 am

nice very good news ,thanks

Reply
- shaan April 23, 2019 At 4:14 am
  
  That’s my pleasure.
  
  Reply
Adithya July 18, 2019 At 3:31 pm

I have to agree with others on How the post is about Show more and not Load More…. I think you should take some time to make the changes so as give proper information.

Thanks for the tut.

Reply
tester11 October 3, 2019 At 10:05 am

I recommend you to add the following things to prevent some issues. I modified it to remove the boxes and it appeared as list items, however the “Load more” button was really buggy and not quite hoverable or clickable – only a small area was clickable. The issue was that the text was overlaying the button, so having only opacity is not enough. Adding display would be one solution, but then it loses the transition animations. I found that adding visibility in addition to the opacity fixed the issue. That way, the text is properly hidden and does not mess with any other elements.

add “visibility: hidden;” to:
.load-more-container ul li:nth-child(1n + 5) {visibility: hidden;}

and add “visibility: visible;” to:
.load-more-container #load-more:checked ~ ul li:nth-child(1n + 5) {visibility: visible;}

Reply
Ali February 13, 2020 At 11:12 am

Not working

Reply