Hide a certain amount of items

Question

Supposing I was 10 div class="code" in my document! How do I add a button, so that when loading the page only 5 of these items is shown, and the other 5 are hidden, and after clicking the button these other 5 is also shown

Answer 1

You can do this by using the jQuery toggle function and lt(n) selector to select the first 5 items:

$(function() {

  var codes = $('.code');
  var first5 = $('.code:lt(5)');
  
  codes.toggle();
  first5.toggle();

  $('#btn-show-hide').click(function() {
  
    codes.toggle();
    first5.toggle();
  
  });

});

.code {
  
  min-height: 10px;
  background: #ccc;
  margin-bottom: 5px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<div class="code"></div>
<input type="button" id="btn-show-hide" value="Mostrar / Esconder">

Answer 2

jquery

$(".divIDClass").hide();

javascrpt

document.getElementByClass("divIDClass").style.display = 'none';

both selected by class