-1

Вопросы на странице должны появляться по 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>

1
  • Если минусите, то будьте добры описать, в чем не точность вопроса?
    – Aleksandr
    17 окт 2020 в 4:57

1 ответ 1

3

для блоков вместо использования 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>

5
  • Ответ действительно решает поставленную задачу. Однако, я не предусмотрел такое, что с бека все элементы однотипные появляются с классом faq-item mb-4 d-block. Тогда мне придется написать костыль, при загрузки страницы первым трем элементам снять класс d-block , и только после ваш ответ сработает... В любое случае спасибо, буду думать.
    – Aleksandr
    17 окт 2020 в 5:14
  • 1
    зачем? для первых трех как раз d-block пусть и остается, а для скрытых d-none 17 окт 2020 в 5:18
  • с другой стороны можно попросить бекендера после третьего элемента добавлять класс d-none. Главное что бы меня не послал =))
    – Aleksandr
    17 окт 2020 в 5:19
  • 1
    добавил 2 строчки перед update_buttons(); на случай, если вдруг придется идти куда пошлют) 17 окт 2020 в 5:22
  • Андрей, искренне благодарю.
    – Aleksandr
    17 окт 2020 в 5:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.