There are a number of content blocks. For example:

<div class="wrapper"> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div>

How to make that when loading the site were shown, for example, the first 4 blocks, and the rest were hidden display: none; until you click on the "Show more" button? After pressing the button, 4 more blocks were opened, then another, and so on ...

2 answers 2

Correct to insert only 4 elements, the rest to add, and not to hide.
But if such a structure ...
Find all the blocks in the array, slice more than step - display: none; , listen to the button, when clicked, take a slice from the current element to the current element + step and open them.

 let data = Array.from(document.querySelectorAll('.wrapper .content')), step = 4, item = 0; data.slice(step).forEach(e => e.style.display = 'none'); item += step; document.querySelector('#more').addEventListener('click', function(e){ let tmp = data.slice(item, item + step); tmp.forEach(e => e.style.display = 'block'); item += step; if(tmp.length < 4) this.remove(); }); 
 <div class="wrapper"> <div class="content">Content 1</div> <div class="content">Content 2</div> <div class="content">Content 3</div> <div class="content">Content 4</div> <div class="content">Content 5</div> <div class="content">Content 6</div> <div class="content">Content 7</div> <div class="content">Content 8</div> <div class="content">Content 9</div> <div class="content">Content 10</div> <input type='button' id='more' value='Show me more!' /> </div>

  • Thank. Is it still possible to make the MORE button disappear if there is nothing more to show? - l2banners
  • Of course, updated the example. - user207618 6:49 pm
  • Thanks again, this is what you need. - l2banners

As an option

 jQuery(function() { var c = $(".content").size(); x = 4; $('.content:lt(' + x + ')').fadeIn(); $('.btn-more').click(function(e) { e.preventDefault(); x = (x + 4 <= c) ? x + 4 : c; $('.content:lt(' + x + ')').show(); }); }); 
 .content { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="wrapper"> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> <div class="content">content</div> </div> <a href="#" class="btn-more">btn more</a>

  • Thank. Is it still possible to make the MORE button disappear if there is nothing more to show? - l2banners