2つの異なるボタンクリックに基づいて2つの異なるdivセクションを折りたたんで折り畳む方法は？

Question

私は以下のように定義された2つのボタンがあります。

<button href="#select" class="btn btn-default" data-toggle="collapse"> 
     Select 
</button> 

<button href="#add" class="btn btn-default" data-toggle="collapse"> 
     Add 
</button> 

をそして、私は以下のように定義された2つの異なるのdivセクションを、持っている：

<div id="select" class="collapse"> 
     Select your option 
</div> 

<div id="add" class="collapse"> 
     Add your option 
</div> 

私はボタンを「選択」をクリックすると、選択のdivが折りたたまれます。
その後、[追加]ボタンをクリックすると、divが選択divのすぐ下に折りたたまれます。

一度に1つのdivだけを表示します。 '選択'をクリックした場合、divを選択してください。その後、ユーザーが '追加' divをクリックすると、divを選択すると表示され、divを追加するとdivが表示されます。

上記の方法で試しましたが、期待した結果が得られません。私が望む行動を達成する方法はありますか？

ありがとうございます！

Answer 1

だけ.panelであなたのdivセクションの両方をラップして、idを持つ親コンテナインチそして、フィドル、あなたのdivにdata-parent属性として

<div id="parent"> 
    <div class="panel"> 
    <div id="select" class="collapse" data-parent="#parent"> 
     Select your option 
    </div> 
    </div> 
    <div class="panel"> 
    <div id="add" class="collapse panel" data-parent="#parent"> 
     Add your option 
    </div> 
    </div> 
</div> 

---

をIDを追加 - https://jsfiddle.net/dszc5q5r/