@doorway-team
Казань

Как в аккордеоне сделать активным только 1 элемент?

Есть аккордеон. Если раскрыть все элементы, то они будут раскрыты все. Но как сделать так, чтобы раскрыт был только 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}
  • Вопрос задан
  • 185 просмотров
Пригласить эксперта
Ответы на вопрос 1
@alekcena
Нелинейный наставник
Вы как открываете аккордеон?
- При клике добавляете класс.
Мы имеем:
Открытый аккордеон имеет дополнительный класс "active"
Значит что-бы закрыть его нужно убрать этот класс
Как искать элементы по селектору, вы знаете.
Итог
При клике нужно находить аккордеон который имеет класс "active" и убирать его
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы