Есть свайпер со слайдами. Все слайды имеют одинаковые классы. В слайдах есть ul, в которой показаны только первые четыре li, а остальные должны показывать после нажатия на кнопку "Подробнее...". Но в прописанном мной JS-коде класс даётся всем li во всех родителях, когда как только надо в слайде где была нажата кнопка.
//HTML
<div class="swiper-slide first-slide ">
<h4>Подготовка к школе</h4>
<span class="tenge-price">30 000 тг</span>
<div class="age-and-time">
<p>4-6 лет</p>
<p class="mb60"><span>3 занятия</span> в неделю по <span>3 ч.</span></p>
<ul>
<li>Обучение чтению </li>
<li>Письмо</li>
<li>Математика</li>
<li>Английский язык</li>
<li>Развитие речи</li>
<li>Концентрация внимания</li>
<li>Усвоение изучаемого материала</li>
<li>Различные техники запоминания</li>
<li>Развитие логико-математического мышления</li>
</ul>
<button class="more">Подробнее...</button>
<a href="#">Выбрать</a>
</div>
</div>
<div class="swiper-slide second-slide">
<h4>скорочтение</h4>
<span class="tenge-price">27 000 тг</span>
<div class="age-and-time">
<p>6-15 лет</p>
<p class="mb60"><span>3 занятия</span> в неделю по <span>1 ч.</span></p>
<ul>
<li>Увеличение скорости чтения</li>
<li>Артикуляция</li>
<li>Развитие речи</li>
<li>Развитие внимания</li>
<li>Увеличение поля зрения</li>
<li>Увеличение словарного запаса</li>
<li>Понимание прочитанного</li>
<li>Пересказ</li>
<li>Различные техники понимания</li>
<li>Пробный урок и диагностика БЕСПЛАТНО</li>
</ul>
<a href="#">Выбрать</a>
</div>
</div>
//CSS
.age-and-time ul li:nth-child(n + 5) {
display: none;
}
.li_on{
display: block !important;
}
.more {
font-family: Commissioner;
font-size: 24px;
font-weight: 400;
line-height: 29px;
letter-spacing: 0em;
color: #018FA3;
background: transparent;
border: none;
margin-bottom: 60px;
}
.more__none{
display: none;
}
//JS
var more = $('.more');
var li_off = $('.age-and-time ul li:nth-child(n + 5)')
more.click(function(){
more.toggleClass('more__none');
li_off.toggleClass('li_on');
});