jQueryでブートストラップアコーディオンを制御する

Question

私は現在、ブートストラップアコーディオンウィジェットを実装しており、現在開いているパネルを切り替えることができる要素を各パネルの本体に配置したいと考えています（別のパネルを展開して非表示にします）。 （これは、開閉パネルのデフォルトのブートストラップ動作に影響を与えるように思われるいくつかの理由について

$(".displayPanel").click((e) => { 
    $("[id^='collapse']").collapse('hide'); 
    $("#collapse" + e.target.text).collapse('show'); 
}) 

：私は現在、すべてのパネルを折りたたむにはjQueryのワイルドカードセレクターを使用してこれをやって、その後、私は必要なものを示していますパネルが左に開いてしまうなど）。 Hereはこの問題を示す最小の例です。このようなことを達成するための良い方法がありますか？

ありがとうございます。

Answer 1

"非表示"を待つ必要があり、次に "表示"を実行できます。 Here the updated fiddle.

おそらく、「非表示」が完了したことを示すイベントがあった場合は、よりクリーンになります。

$(".displayPanel").click((e) => { 
    $("[id^='collapse']").collapse('hide'); 
    setTimeout(function(){ 
    $("#collapse" + e.target.text).collapse('show'); 
    },1000); 
});