Есть аккордеон. Если раскрыть все элементы, то они будут раскрыты все. Но как сделать так, чтобы раскрыт был только 1 элемент активный, а другие чтобы закрывались?
$(document).ready(function() {
$('.accordion-list-button').click(function () {
$(this).toggleClass('active');
$(this).prev('.accordion-list-wrapper').slideToggle(600);
});
});
Пример элемента:
<li class="accordion-list-item">
<section class="accordion-list-container">
<h2 class="accordion-list-title">Заголовок</h2>
<div class="accordion-list-wrapper">
<h3 class="accordion-list-content">Тут контент</h3>
</div>
<span class="accordion-list-button"></span>
</section>
</li>
.accordion-list{font-size:0;list-style:none;margin:0 0 -15px;padding:30px;background:#f5f5f6;border-radius:15px}
.accordion-list-item{position:relative}
.accordion-list-item:after{content:'';display:block;width:100%;height:1px;background:#e1e2e1;margin:0 0 20px}
.accordion-list-item:last-child:after{height:0;margin:0}
.accordion-list-container{margin:0 0 15px}
.accordion-list-button:before{content:'';cursor:pointer;position:absolute;top:0;right:0;display:block;width:43px;height:43px;background:url(../../images/icon/accordeon-open.png)}
.accordion-list-button.active:before{background:url(../../images/icon/accordeon-close.png)}
.accordion-list-wrapper{position:relative;overflow:hidden;display:none;}
.accordion-list-title{font-size:24px;font-weight:500;line-height:33px;margin:0 0 20px}
.accordion-list-content{color:#666;font-size:16px;font-weight:500;line-height:22px;margin:0;padding:30px;background:#fff;border:1px solid #e1e2e1;border-radius:10px}