对方打开时如何关闭手风琴？

Question

Can anyone please help me to close other accordions when one is open. Currently, all accordions remain open when clicked. Here is the code.

 $('.accordion-tabs-toggle').next().hasClass('show'); $('.accordion-tabs-toggle').next().removeClass('show'); $('.accordion-tabs-toggle').next().slideUp(350); $(document).on('click', '.accordion-tabs-toggle', function() { var $this = $(this); $this.siblings('.faq-content').toggleClass('show'); $this.toggleClass('active'); $this.siblings('.faq-content').slideToggle(350); $this.find('.dashicons.dashicons-arrow-down.custom-toggle-tabs').toggleClass('open'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="itinerary-content"> <a href="javascript:void(0);" class="accordion-tabs-toggle"> <div class="title tid_1"> 1.Auctor aspernatur dictum </div> </a> <div class="faq-content" style="display: none;"> <p>Auctor aspernatur dictum perspiciatis </p> </div> </div> <div class="itinerary-content"> <a href="javascript:void(0);" class="accordion-tabs-toggle"> <div class="title tid_2"> 2.Auctor aspernatur dictum </div> </a> <div class="faq-content" style="display: none;"> <p>Auctor aspernatur dictum perspiciatis</p> </div> </div> 

Answer 1

Try this:

HTML:
   <div class="accordion">
   <a href="javascript:void(0);" class="accordion-tabs-toggle">
     <div class="title tid_1">
        1.Auctor aspernatur dictum 
     </div>
  </a>
</div>
<div class="panel">
    <div class="faq-content">
    <p>Auctor aspernatur dictum perspiciatis </p>
  </div>
</div>
<div class="accordion">
  <a href="javascript:void(0);" class="accordion-tabs-toggle">
    <div class="title tid_2">
        2.Auctor aspernatur dictum
    </div>
 </a>
</div>
<div class="panel">
    <div class="faq-content">
    <p>Auctor aspernatur dictum perspiciatis</p>
 </div>
</div>

CSS:

div.panel {
    display: none;
}

div.panel.show {
    display: block !important;
}

JS:

var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        var setClasses = !this.classList.contains('active');
        setClass(acc, 'active', 'remove');
        setClass(panel, 'show', 'remove');

        if (setClasses) {
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
        }
    }
}

function setClass(els, className, fnName) {
    for (var i = 0; i < els.length; i++) {
        els[i].classList[fnName](className);
    }
}

Answer 2

you can achieve your goal using below code. It's simple and clean way.

 $(document).ready(function () { $('.accordion-tabs-toggle').on('click', function (e) { e.preventDefault(); $(this).toggleClass('active').siblings('.faq-content').slideToggle(); $(this).parent().siblings().find('.accordion-tabs-toggle').removeClass('active').siblings('.faq-content').slideUp(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="itinerary-content"> <a href="javascript:void(0);" class="accordion-tabs-toggle"> <div class="title tid_1"> 1.Auctor aspernatur dictum </div> </a> <div class="faq-content" style="display: none;"> <p>Auctor aspernatur dictum perspiciatis </p> </div> </div> <div class="itinerary-content"> <a href="javascript:void(0);" class="accordion-tabs-toggle"> <div class="title tid_2"> 2.Auctor aspernatur dictum </div> </a> <div class="faq-content" style="display: none;"> <p>Auctor aspernatur dictum perspiciatis</p> </div> </div>