Как правильно показывать порциями блоки?

Question

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

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

$(document).ready(function() {
  let faqItem = $('.faq-item'),
    perNub = 3,
    iCount = 1,
    totalItem = 0;

  $('.show-more').on('click', function() {
    totalItem = perNub * (iCount++);

    faqItem.slice(0, totalItem).fadeIn();

    $(this)[totalItem >= faqItem.length ? 'fadeOut' : 'fadeIn']();
  });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="faq-list jumbotron">
  <div class="faq-item mb-4">
    <h3 class="mb-1">Безопасность</h3>
    <div>
      Бронируйте сразу, как только определились
    </div>
  </div>

  <div class="faq-item mb-4">
    <h3 class="mb-1">Цена за&nbsp;групповую</h3>
    <div>
      В нашем представлении группа
    </div>
  </div>

  <div class="faq-item mb-4">
    <h3 class="mb-1">Нас больше</h3>
    <div>
      Уточните у гида в переписке
    </div>
  </div>

  <div class="faq-item mb-4" style="display: none">
    <h3 class="mb-1">Безопасность</h3>
    <div>
      Бронируйте сразу, как только определились
    </div>
  </div>

  <div class="faq-item mb-4" style="display: none">
    <h3 class="mb-1">Цена за&nbsp;групповую</h3>
    <div>
      В нашем представлении группа
    </div>
  </div>

  <div class="faq-item mb-4" style="display: none">
    <h3 class="mb-1">Нас больше</h3>
    <div>
      Уточните у гида в переписке
    </div>
  </div>

  <div class="faq-item mb-4" style="display: none">
    <h3 class="mb-1">Безопасность</h3>
    <div>
      Бронируйте сразу, как только определились
    </div>
  </div>

  <div class="faq-item mb-4" style="display: none">
    <h3 class="mb-1">Цена за&nbsp;групповую</h3>
    <div>
      В нашем представлении группа
    </div>
  </div>

  <div class="faq-item mb-4" style="display: none">
    <h3 class="mb-1">Нас больше</h3>
    <div>
      Уточните у гида в переписке
    </div>
  </div>
</div>


<div class="show-more btn-primary btn">Показать ещё вопросы</div>

<div class="hide-more btn-secondary btn" style="display: none">Свернуть вопросы</div>

Answer 1

для блоков вместо использования style="display: none" используйте класс d-none что бы легче было их искать с помощью селекторов, для тех, что показаны принудительно установите d-block. Сам код получился таким:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="faq-list jumbotron">
  <div class="faq-item mb-4 d-block">
    <h3 class="mb-1">Безопасность</h3>
    <div>
      Бронируйте сразу, как только определились
    </div>
  </div>

  <div class="faq-item mb-4 d-block">
    <h3 class="mb-1">Цена за&nbsp;групповую</h3>
    <div>
      В нашем представлении группа
    </div>
  </div>

  <div class="faq-item mb-4 d-block">
    <h3 class="mb-1">Нас больше</h3>
    <div>
      Уточните у гида в переписке
    </div>
  </div>

  <div class="faq-item mb-4 d-none">
    <h3 class="mb-1">Безопасность</h3>
    <div>
      Бронируйте сразу, как только определились
    </div>
  </div>

  <div class="faq-item mb-4 d-none">
    <h3 class="mb-1">Цена за&nbsp;групповую</h3>
    <div>
      В нашем представлении группа
    </div>
  </div>

  <div class="faq-item mb-4 d-none">
    <h3 class="mb-1">Нас больше</h3>
    <div>
      Уточните у гида в переписке
    </div>
  </div>

  <div class="faq-item mb-4 d-none">
    <h3 class="mb-1">Безопасность</h3>
    <div>
      Бронируйте сразу, как только определились
    </div>
  </div>

  <div class="faq-item mb-4 d-none">
    <h3 class="mb-1">Цена за&nbsp;групповую</h3>
    <div>
      В нашем представлении группа
    </div>
  </div>

  <div class="faq-item mb-4 d-none">
    <h3 class="mb-1">Нас больше</h3>
    <div>
      Уточните у гида в переписке
    </div>
  </div>
</div>


<div class="show-more btn-primary btn">Показать ещё вопросы</div>

<div class="hide-more btn-secondary btn d-none">Свернуть вопросы</div>

<script language="Javascript">
$( document ).ready(function() {

   function update_buttons() {
       if ($('.faq-item.d-none').length > 0) {
          $('.show-more').removeClass('d-none');
       } else {
          $('.show-more').addClass('d-none');
       }
       if ($('.faq-item.d-block').length > 3) {
          $('.hide-more').removeClass('d-none');
       } else {
          $('.hide-more').addClass('d-none');
       }

   }
   
   $('.show-more').bind('click', function(event) {
       event.preventDefault();
       let blocks = $('.faq-item.d-none:lt(3)');
       blocks.addClass('d-block').removeClass('d-none');
       update_buttons();
   });

   $('.hide-more').bind('click', function(event) {
       event.preventDefault();
       let blocks = $('.faq-item.d-block:gt(2)');
       blocks.removeClass('d-block').addClass('d-none');
       update_buttons();
   });
   $('.faq-item:lt(3)').addClass('d-block');
   $('.faq-item:gt(2)').addClass('d-none');
   update_buttons();
});   
</script>

БЛОГ НА HUSL

Как правильно показывать порциями блоки?

Ответы (1 шт):