Search
showing results for - "load more button javascript"
Leonardo
05 Nov 2020
1$(function(){
2    $("div").slice(0, 10).show(); // select the first ten
3    $("#load").click(function(e){ // click event for load more
4        e.preventDefault();
5        $("div:hidden").slice(0, 10).show(); // select next 10 hidden divs and show them
6        if($("div:hidden").length == 0){ // check if any hidden divs still exist
7            alert("No more divs"); // alert if there are none left
8        }
9    });
10});
source
Aimee
21 Sep 2017
1view source
201
3<div class="list example">
402
5  <div class="item">
603
7    <div class="box">
804
9      <div class="pic"><img src="https://picsum.photos/400/300?random=1"></div>
1005
11      <div class="name">Item1</div>
1206
13    </div>
1407
15  </div>
1608
17  <div class="item">
1809
19    <div class="box">
2010
21      <div class="pic"><img src="https://picsum.photos/400/300?random=2"></div>
2211
23      <div class="name">Item2</div>
2412
25    </div>
2613
27  </div>
2814
29  <div class="item">
3015
31    <div class="box">
3216
33      <div class="pic"><img src="https://picsum.photos/400/300?random=3"></div>
3417
35      <div class="name">Item3</div>
3618
37    </div>
3819
39  </div>
4020
41  <div class="item">
4221
43    <div class="box">
4422
45      <div class="pic"><img src="https://picsum.photos/400/300?random=4"></div>
4623
47      <div class="name">Item4</div>
4824
49    </div>
5025
51  </div>
5226
53  ...
5427
55</div>
source
Myla
14 Apr 2018
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <title>How To Create Javascript Load More Content On Click Button</title>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7</head>
8<body>
9	<!-- List of your items -->
10	<div class="list">
11	    <div class="list-element">Product 1</div>
12	    <div class="list-element">Product 2</div>
13	    <div class="list-element">Product 3</div>
14	    <div class="list-element">Product 4</div>
15	    <div class="list-element">Product 5</div>
16	    <div class="list-element">Product 6</div>
17	</div>
18
19	<!-- Load More Button -->
20	<button id="loadmore">Load More...</button>
21</body>
22</html>
similar questions
javascript how to dynamically add asp buttonhtml button click only oncejavascript enable a button once an input text filledread more 2fless button with smoth expandhow to make a button jump between two functions when clicked in javascriptjquery onclick multiple buttonsload more javascript scrollradio button send form after clickedrandom order of buttons on refresh in vanilla jslaravel load more button ajaxbtn click on click file javascripti get two times event click of button javascriptbutton in vanilla jsload a script after a button is pressed jshow to make a button execute a javascript function
queries leading to this page
btn load more jsload more button or load injavascript load more buttonload more button javascript w3schoolsjs load more button showmake load more button javascriptload more button htmlload more buttonload more button exampleswhat html element for load more buttonjs load more buttonload more button vanilla javascriptload more button javascript exampleload more button functionalityload more button jsload more button with codehtml with load more buttonshow load more buttonvanilla javascript load more buttonload more button javascriptsimple load more button with javascriptload more button cssload more button demohow to create button load morehtml load more button javascripthow to add load more button in html with javascripthow to add load more button in htmlload more button javascript