Assuming I have 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 displayed, and the other 5 are hidden, and after clicking the other 5 buttons is also the display
Hide certain quantity
1
asked by anonymous 21.02.2016 / 22:41
2 answers
1
You can do this by using the jQuery toggle function and the 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><divclass="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">
21.02.2016 / 23:01
0
jquery
$(".divIDClass").hide();
javascrpt
document.getElementByClass("divIDClass").style.display = 'none';
Both selected by class
21.02.2016 / 23:01