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.

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.

You May Also Like:

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.

index.html <!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> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 < ! 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 >

style.css

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

style.css /* 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; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 /* 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.