Как сделать, если элементов больше 5 — то они скрывались? И открывались по нажатии кнопки?

Question

[MisTFoR]

Здравствуйте!
Помогите решить такой вопрос:
Как сделать так - что если генерируемых блоков больше 5 - то они скрывались? И раскрывались по нажатии на кнопку "Показать все"?

Вот пример:

<div class="content">
   <div class="filter">
      <p>Текст - 1</p>
   </div>
   <div class="filter">
      <p>Текст - 2</p>
   </div>
   <div class="filter">
      <p>Текст - 3</p>
   </div>
   <div class="filter">
      <p>Текст - 4</p>
   </div>
   <div class="filter">
      <p>Текст - 5</p>
   </div>
   <p>Показать остальное</p>
</div>

Comments

[Andrew]

JS:

1. Считаете кол-во элементов
   
2. Пишите условие скрытия(length>5)
   
3. Проходитесь циклом по обьектам и скрываете у кого индекс больше 5-1(вашего условия)
   
4. По клику - показываете скрытые(удаляете класс или тупо работаете со стилями напрямую)
   

[Михаил]

.is-collapsed > div:nth-of-type(n+6) {
  display: none;
}

Answer 1

[Илья Савиных]

При генерации блоков задайте атрибут hidden всем блокам, начиная с шестого (чтобы первые 5 отображались)

<div class="content">
   <div class="filter">
      <p>Текст - 1</p>
   </div>
   <div class="filter">
      <p>Текст - 2</p>
   </div>
   <div class="filter">
      <p>Текст - 3</p>
   </div>
   <div class="filter">
      <p>Текст - 4</p>
   </div>
   <div class="filter">
      <p>Текст - 5</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 6</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 7</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 8</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 9</p>
   </div>
   <div class="filter" hidden>
      <p>Текст - 10</p>
   </div>
   <p class="show_content">Показать остальное</p>
</div>

Далее на Jquery напишите код..

$(document).ready(() => {
        $('body').on('click', '.show_content' , () => {
            var scrollToProduct = $('.filter:hidden');
            $('.filter:hidden:lt(5)').slideDown(1000);
            if (scrollToProduct.length === 0) $('.show_content').hide() ;
            $('html, body').animate({
                scrollTop: scrollToProduct.offset().top
            }, 1000);
        });
    });

$('.filter:hidden:lt(5)').slideDown(1000); - 5 можете заменить на любое значение, именно столько блоков будут отображаться при каждом нажатии на "Показать остальное"
Также может быть будет полезным после нажатия на кнопку "Показать остальное", чтобы вас плавно скроллило на первый новый отобразившийся блок)
Либо, если Вам нужно, чтобы при нажатии на кнопку отображались все блоки, то напишите:

$(document).ready(() => {
        $('body').on('click', '.show_content' , () => {
            var scrollToProduct = $('.filter:hidden');
            $('.filter:hidden').slideDown(1000);
            if (scrollToProduct.length === 0) $('.show_content').hide() ;
            $('html, body').animate({
                scrollTop: scrollToProduct.offset().top
            }, 1000);
        });
    });

или примитивный вариант:

$(document).ready(() => {
        $('body').on('click', '.show_content' , () => {
            var scrollToProduct = $('.filter:hidden');
            $('.filter:hidden').show();
            if (scrollToProduct.length === 0) $('.show_content').hide() ;
        });
    });

Answer 2

[maxhd]

типо такого? codepen

Comments

[MisTFoR]

Да.
Попробовал как у вас, не получилось.
Просто, в блоке "content" у меня есть автогенерируемые блоки "checkbox", и мне нужно что бы они выполняли функцию которую я описал