демо скрипка:
https://jsfiddle.net/7xwncjug/1/
написал скрип, по логике: открывается часть контента поэтапно - работает, но поэтапно закрыть не получается, закрывается всё...
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li class="item hidden">item 4</li>
<li class="item hidden">item 5</li>
<li class="item hidden">item 6</li>
<li class="item hidden">item 7</li>
<li class="item hidden">item 8</li>
<li class="item hidden">item 9</li>
<li class="item hidden">item 10</li>
<li class="item hidden">item 11</li>
</ul>
<div id="btn">раскрыть</div>
<div id="btn2" class="hidden">закрыть</div>
.hidden{
display:none;
}
$(function () {
$('#btn').click(function(evt) {
evt.stopPropagation(); //stops the document click action
$('ul li.item.hidden').slice(0,3).removeClass('hidden').addClass('opened');
if (!$('li.item').hasClass('hidden')) {
$('#btn').addClass('hidden');
}
if ($('li.item').hasClass('opened')) {
$('#btn2').removeClass('hidden');
}
});
});
$(function () {
$('#btn2').click(function() {
$('ul li.item').addClass('hidden').removeClass('opened').prev().slice(-3);
if ($('li.item').hasClass('hidden')) {
$('#btn').removeClass('hidden');
}
if ($('li.item').hasClass('hidden')) {
$('#btn2').addClass('hidden');
}
});
});