Приветствую. Есть у меня owl карусель и в каждом элементе раскрывающийся список по кнопке подробнее, но почему-то не все элементы раскрываются. Тут я схематично представил один элемент, а проблему можно увидеть здесь Не могу понять: если вводить количество item на странице 3, то раскрываются 2 списка(на большом экране), если 2, то раскрываются 3, если 1, то тоже 3.. По ссылке раскрывается так вообще только один - что за черт с этой каруселью?
$('#correspondents').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsiveClass: true,
navigationText: ["", ""],
responsive: {
0: {
items: 1
},
680: {
items: 2
},
1024: {
items: 3
}
}
});
$("#correspondent-1-more").click(function() {
$("#correspondent-1-group").show();
});
.about-grid-john {
background: #fff;
box-shadow: 0px 2px 0px #D4D5D9;
padding: 1em;
}
.about-grid img {
width: 100%;
}
p.para {
color: #5E6C76;
margin: 3px 0;
font-size: 14px;
line-height: 25px;
}
#correspondent-1-group,
#correspondent-2-group,
#correspondent-3-group,
#correspondent-4-group {
display: none;
}
<div class="owl-carousel" id="correspondents">
<div class="correspondent">
<img src="#" alt=" " />
<div class="about-grid-john">
<div class="john">
<h4>Титул</h4>
</div>
<div class="social-icons">
<ul>
<li>
<a href class="facebook"></a>
</li>
<li>
<a href class="twitter"></a>
</li>
</ul>
</div>
<div class="clearfix"></div>
<p id="correspondent-1-more">Подробнее</p>
<div id="correspondent-1-group">
<p class="para">бла-бла-бла</p>
<p id="correspondent-1-break">Свернуть</p>
</div>
</div>
</div>
</div>