如何使两个可折叠div互斥

Question

I have two collapsible div A(collapseOne) and B(collapseTwo) that are based on twitter's bootstrap . How to make A is collapsed when B is expanded or vice versa?

My code looks like below,

 <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>

I want to div collapseOne is hidden and collapseTwo is visible by default. After clicking link Show brief , make collapseTwo hidden and collapseOne is shown.

Answer 1

Just use the sample they provide with the documentation . I've simplified it for you here, make sure all your divs have the same data-parent in order to act as an accordion.

<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>