Как показать определённое количество блоков по клику?

Question

[lexchz]

Есть такая конструкция:

<div class="container">
<div class="item"><div>
<div class="item"><div>
<div class="item"><div>
<div class="item"><div>
<div class="item"><div>
<div class="item"><div>
<div class="item"><div>
<div class="item"><div>
<div class="item"><div>
<div class="item"><div>
<div class="item"><div>
<div class="item"><div>
</div>
<div class="more">Показать ещё</div>

Нужно чтобы после загрузки страницы показывалось 4 блока с классом item, по нажатии на кнопку "Показать ещё" - показывались следующие 4 блока и т.д. Когда все блоки показаны - кнопка "Показать ещё" должна скрываться.

Знаю решение на AJAX, но в моём случае необходимости в отложенной загрузке нет и распределять блоки по отдельным страницам не нужно. Как максимально просто реализовать такое на JQuery?

Answer 1

[Денис]

Пример в песочнице

var items = $('.item'),
per = 4,
i = 1,
total = 0;
$('.more').on('click', function(){
	total = per * (i++);
	items.slice(0, total).show();
    $(this)[total >= items.length ? 'hide' : 'show']();
}).click();

Comments

[iBird Rose]

а потом еще после last $(this).hide();

[Денис]

iBird Rose точно. Забыл про то, что кнопку еще надо спрятать. Изменил в ответе

[lexchz]

Спасибо! То, что нужно.