0

Есть такой аккордион

$( ".category-accordion-head" ).on('click', function(event) {
      var $otherHeads = $('.category-accordion-head-active').not(this);
			var $otherContents = $('.category-accordion-content-wrapper').not(this).parent('.category-accordion').find('.category-accordion-content-wrapper');
			
			$(this).toggleClass('category-accordion-head-active');
			$otherHeads.removeClass('category-accordion-head-active');

			$otherContents.slideUp();
			$(this).parent('.category-accordion').find('.category-accordion-content-wrapper').slideToggle();
});
.category-accordion-content-wrapper {
	display: none;
}
.category-accordion-head-active {
	border: solid red 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "category-accordion">
  <h3 class="category-accordion-head">Заголовок 1</h3>
  <div class = "category-accordion-content-wrapper">Содержимое 1</div>
</div>
<div class = "category-accordion">
  <h3 class="category-accordion-head">Заголовок 2</h3>
  <div class = "category-accordion-content-wrapper">Содержимое 2</div>
</div>
<div class = "category-accordion">
  <h3 class="category-accordion-head">Заголовок 3</h3>
  <div class = "category-accordion-content-wrapper">Содержимое 3</div>
</div>
<div class = "category-accordion">
  <h3 class="category-accordion-head">Заголовок 4</h3>
  <div class = "category-accordion-content-wrapper">Содержимое 4</div>
</div>

Все работает хорошо до того момента, как я хочу закрыть активный аккордион. Я не понимаю как сделать, так чтобы логика осталась такая как сейчас, то есть при клике аккордион открывается и заголовок выделяется рамкой, но аккордион можно было закрыть при желании и закрытый аккордион терял бы выделение рамки

2 ответа 2

1

Можете попробовать вот так:

$( ".category-accordion-head" ).on('click', function(event) {
  var $this = $(this),
      $parent = $this.closest('.category-accordion'),
      $otherContents = $parent.find('.category-accordion-content-wrapper');

  if( $this.hasClass('category-accordion-head-active') ) {
    // если активный
    $otherContents.slideUp(function(){
      $this.removeClass('category-accordion-head-active'); // это можете вынести из функции. Как по мнетак красивее
    });
  } else {
    $('.category-accordion').not($parent)
      .find(".category-accordion-head").removeClass('category-accordion-head-active')
      .next().slideUp();

    $parent
      .find(".category-accordion-head")
        .addClass('category-accordion-head-active')
        .next().slideDown();
  }    
})
0

У вас остается style='display:block' <div class = "category-accordion-content-wrapper">. Вам надо его удалить просто.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.