ausblenden Akkordeon auf der Registerkarte ändern

Question

Problem:

ich Tabs, die von jQuery Tabs mit Energie versorgt werden. Innerhalb der Registerkarten befinden sich Akkordeon-Elemente, die beim Klicken erweitert werden. Ich möchte alle aktiven (geöffneten) Akkordeon-Divs ausblenden, wenn ich auf einen anderen Tab wechsle.

Aktuelle Code, das Akkordeon Verhalten verwaltet:

var all_spans = $('.accordion-item-text').hide(); 

$('.accordion-item h3').click(function(e){ 
    $('.accordion-item h3').removeClass('active'); 
    $(this).toggleClass('active'); 
    var thisSpan = $(this).parent().find('.accordion-item-text'), 
     isShowing = thisSpan.is(":visible"); 

    all_spans.hide(500); 
    if (!isShowing) { 
     thisSpan.slideToggle(); 
    } 
    e.preventDefault(); 
}); 

Aktuellen Code, den Registerkarte ändern verwalten sollte und verstecken alle Akkordeon-Elemente geöffnet:

, dachte ich so, dass eine einfache Funktion Klick würde Mach es aber anscheinend habe ich mich geirrt.

Das funktioniert einfach nicht, muss ich genau vorher div suchen? Irgendwelche Vorschläge sind willkommen.

Aktuelle HTML-Teil:

<div class="product_content"> 
    <div id="tabs"> 

     <ul class="clearfix"> 
     <li><a href="#tabs-0">About</a></li> 
     <li><a href="#tabs-1">General specifications</a></li> 
     </ul> 

     <div id="tabs-0" class="tabcontent"> 

      <div class="accordion_wrap"> 
      <div class="accordion-item"> 
       <h3>Accordion label</h3> 
       <div class="accordion-item-text">accordion content</div> 
      </div> 
      </div> 

      <div class="accordion_wrap"> 
      <div class="accordion-item"> 
       <h3>Accordion label</h3> 
       <div class="accordion-item-text">accordion content</div> 
      </div> 
      </div> 

     </div> 

     <div id="tabs-1" class="tabcontent">         
      <div class="accordion_wrap"> 
      <div class="accordion-item"> 
       <h3>Accordion label</h3> 
       <div class="accordion-item-text">accordion content</div> 
      </div> 
      </div> 
     </div> 

    </div> 
</div> 

Answer 1

Also, ich habe eine Lösung dafür gefunden. Ich weiß nicht genau, warum meine vorherige Funktion nicht funktionierte, aber nachdem ich darauf geschlafen habe, habe ich die jQuery UI Dokumentation gelesen und herausgefunden, dass ich meine reguläre Tabs Fire Funktion verwenden kann.

$("#tabs").tabs({ 
    activate: function(event, ui) { 

     $('.accordion-item h3').removeClass('active'); 
     $('.accordion-item-text').hide(500); 

    } 
});