隠すアコーディオン

Question

問題：

私はjQueryのタブによって供給されているタブを持っています。タブの内側には、クリックすると展開するアコーディオンアイテムがあります。私は別のタブに変更すると、アクティブな（開いた）アコーディオンのdivをすべて非表示にしたいと思います。アコーディオンの動作を管理

現在のコード：タブの変更を管理し、すべてを非表示にする必要があり

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(); 
}); 

現在のコードでは、アコーディオンの要素を開設：

をだから、私は、単純なクリック機能は、と思いました明らかに私は間違っていた。

$('.ui-tab').click(function() { 
    $('.accordion-item h3').removeClass('active'); 
    $('.accordion-item-text').hide(500); 
}); 

これは機能しません。以前は正確なdivを検索する必要がありますか？どんな提案も大歓迎です。

現在のHTML部分：

<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

だから、私はそれのための解決策を発見しました。 私の以前の機能がうまくいかなかった理由はわかりませんが、寝てからはjQuery UIのドキュメントを読んで、私の普通のタブを使うことができます。

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

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

    } 
});