Вопросы на странице должны появляться по 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">Цена за групповую</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">Цена за групповую</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">Цена за групповую</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>