2つの折りたたみ可能なdivを相互に排他的にする方法

Question

twitterのbootstrapに基づいて折りたたみ可能なdiv A（collapseOne）とB（collapseTwo）があります。 Bを展開するとAをつぶすか、Bを展開するとAをつぶすか？

私のコードは

<div class="shop-details" id="shop-accordion"> 
     <div id="collapseOne" class="shop-brief clearfix collapse hide"> 
      <h2 class="yahei ft30">MyName</h2> 
      <span class="unfold"><a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseOne"><i class="path-down"></i>Show details</a></span> 
     </div> 
     <dl id="collapseTwo" class="shop-ds clearfix collapse in"> 
      <dt> 
       <a href="#" target="_parent"><img src="images/pt-small.jpg" width="246" height="169"></a> 
       <div class="shop-ds-txt"> 
        <h2 class="yahei ft30">MyName</h2> 
        <ul class="shop-ds-ul"> 
         <li>Item1</li> 
         <li>Item2</li> 
         <li>Item3</li> 
         <li>Item4</li> 
         <li>Item5</li> 
        </ul> 
       </div> 
      </dt> 
      <dd> 
       <div class="unfold-positon"> 
        <div><span class="unfold"><a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseTwo"><i class="path-up"></i>Show brief</a></span></div> 
       </div> 
      </dd> 
     </dl> 

    </div> 

私は collapseOneが隠されているDIVにしたいと collapseTwoはデフォルトで表示され、以下のように見えます。リンク Show briefをクリックした後、 collapseTwoを非表示にし、 collapseOneを表示します。

Answer 1

sample they provide with the documentationを使用してください。ここでは簡略化しました。アコーディオンとして機能するには、すべてのdivが同じdata-parentになっていることを確認してください。

<div class="accordion" id="my-accordion"> 
    <div class="accordion-group"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordion" href="#collapseOne"> 
       Toggle 1 
     </a> 
     <div id="collapseOne" class="accordion-body in" style="height: auto; "> 
      <div class="accordion-inner"> 
       Inner content 1 
      </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordian" href="#collapseTwo"> 
      Toggle 2 
     </a> 
     <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
       Inner content 2 
      </div> 
     </div> 
    </div>    
</div>