Accordion jQuery через класс модификатор .active

103

16 июля 2021, 23:20

Как написать аккордион на jQuery на основе чередования классов active?

https://jsfiddle.net/75pxcjny/

Написал, но я так понимаю, что он вообще не рабочий у меня.

$('.accordion-content .accordion-title').click(function () {
  var target = $(this).attr('data-accordion');
  $('.accordion-content > .accordion-title').removeClass('active');
  $('.accordion-content > .accordion-title').addClass('active');
  $('.accordion-content .accordion-body').removeClass('active');
  $('.accordion-content .accordion-body' + target).addClass('active');
});

Answer 1

var btnAccordion = $(".accordion-title"); 
 
btnAccordion.on("click", function() { 
  $(".accordion-title.active").removeClass("active").siblings(".accordion-body").slideUp(); 
  $(this).addClass("active").siblings(".accordion-body").slideDown(); 
})

.accordion-container { 
  border: 1px solid #ddd; 
} 
 
.accordion-title { 
  font-weight: 700; 
  display: inline-block; 
  padding: 15px 0 15px 15px; 
  border-bottom: 1px solid #ddd; 
  width: 100%; 
} 
 
.accordion-title.active { 
  color: red; 
} 
 
.accordion-content:first-child .accordion-body { 
  display: block; 
} 
 
.accordion-body { 
  background-color: #eee; 
  border-bottom: 1px solid #ddd; 
  padding: 15px; 
  display: none; 
} 
 
.accordion-body:last-child { 
  border-bottom: none; 
} 
 
.accordion-container .accordion-content .accordion-body p { 
  line-height: 170%; // bull shit 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="accordion-container"> 
  <div class="accordion-content"> 
    <button type="button" data-accordion="#content1" class="accordion-title active">#1   Вопрос №1?</button> 
    <div class="accordion-body" id="#content1"> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, delectus earum minima laborum vero qui molestiae in exercitationem maxime sunt.</p> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, magnam!</p> 
    </div> 
  </div> 
  <div class="accordion-content"> 
    <button type="button" data-accordion="#content2" class="accordion-title">#1   Вопрос №1?</button> 
    <div class="accordion-body" id="#content2"> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, delectus earum minima laborum vero qui molestiae in exercitationem maxime sunt.</p> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, magnam!</p> 
    </div> 
  </div> 
  <div class="accordion-content"> 
    <button type="button" data-accordion="#content3" class="accordion-title">#1   Вопрос №1?</button> 
    <div class="accordion-body" id="#content3"> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, delectus earum minima laborum vero qui molestiae in exercitationem maxime sunt.</p> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, magnam!</p> 
    </div> 
  </div> 
</div>

Ну например так. У вас слишком большая вложенность CSS так не надо. + Вы не правильно используете элемент ссылка. Ссылка используется Только если надо переправить на другую страницу.