Как показывать по три блока и скрывать их?

Question

[Александр Янк]

На странице должны появляться по 3 блока при каждом нажатии на кнопку "показать ещё" и сворачиваться до 3 вопросов при нажатии на кнопку "Свернуть".

Частично мне удалось решить данную задачу:



Однако, срабатывает только со второго раза клика на кнопку "показать ещё", буду рад любым идеям, ссылкам, примерам, может плагины есть какие!

К тому же мне кажется собрано этот скрипт из говнаипалок, порой кажется дом дерево подвисает.

Answer 1

[0xD34F]

const SHOW_MORE = 3;
const itemSelector = '.item';
const hiddenClass = 'd-none';
const hiddenSelector = `.${hiddenClass}`;
const $show = $('.show');
const $hide = $('.hide');
const $items = $(itemSelector);

function updateButtons() {
  $show.toggleClass(hiddenClass, $items.filter(hiddenSelector).length === 0);
  $hide.toggleClass(hiddenClass, $items.not(hiddenSelector).length === SHOW_MORE);
}

$show.click(function() {
  $items.filter(hiddenSelector).slice(0, SHOW_MORE).removeClass(hiddenClass);
  updateButtons();
}).click();

$hide.click(function() {
  $items.slice(SHOW_MORE).addClass(hiddenClass);
  updateButtons();
});

Comments

[Александр Янк]

Просто восхитительно, мою лапшу превратить в такой изящный код, браво, маэстро!