<button data-show-button="hgahsj">Еще одна кнопка</button>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<button data-show-button="hgahsj">Показать еще</button>
<div data-show-block="hgahsj" style="display:none;">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
span {
display: block;
background-color: #666;
width: 100px;
height: 40px;
margin: 5px;
}
$.each($('[data-show-block]'), function() {
if ($(this).children().length <= 15) {
var id = $(this).attr('data-show-block');
$('[data-show-button="'+ id +'"]').hide();
}
});
$('[data-show-button]').on('click touch', function(event) {
event.preventDefault();
var id = $(this).attr('data-show-button');
$('[data-show-block="'+ id +'"]').show();
$('[data-show-button="'+ id +'"]').hide();
});
This Pen doesn't use any external CSS resources.