title: How to make two collapsible div mutually exclusive
body: <p>I have two collapsible div A(collapseOne) and B(collapseTwo) that are based on twitter's <a href="http://twitter.github.com/bootstrap" rel="nofollow">bootstrap</a>. How to make A is collapsed when B is expanded or vice versa?</p>
  
  <p>My code looks like below,</p>
  
  <pre><code> &lt;div class="shop-details" id="shop-accordion"&gt;
        &lt;div id="collapseOne" class="shop-brief clearfix collapse hide"&gt;
            &lt;h2 class="yahei ft30"&gt;MyName&lt;/h2&gt;
            &lt;span class="unfold"&gt;&lt;a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseOne"&gt;&lt;i class="path-down"&gt;&lt;/i&gt;Show details&lt;/a&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;dl id="collapseTwo" class="shop-ds clearfix collapse in"&gt;
             &lt;dt&gt;
                  &lt;a href="#" target="_parent"&gt;&lt;img src="images/pt-small.jpg" width="246" height="169"&gt;&lt;/a&gt;
                  &lt;div class="shop-ds-txt"&gt;
                       &lt;h2 class="yahei ft30"&gt;MyName&lt;/h2&gt;
                       &lt;ul class="shop-ds-ul"&gt;
                           &lt;li&gt;Item1&lt;/li&gt;
                           &lt;li&gt;Item2&lt;/li&gt;
                           &lt;li&gt;Item3&lt;/li&gt;
                           &lt;li&gt;Item4&lt;/li&gt;
                           &lt;li&gt;Item5&lt;/li&gt;
                       &lt;/ul&gt;
                   &lt;/div&gt;
              &lt;/dt&gt;
              &lt;dd&gt;
                 &lt;div class="unfold-positon"&gt;
                       &lt;div&gt;&lt;span class="unfold"&gt;&lt;a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseTwo"&gt;&lt;i class="path-up"&gt;&lt;/i&gt;Show brief&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
                 &lt;/div&gt;
             &lt;/dd&gt;
        &lt;/dl&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>I want to div <code>collapseOne</code> is hidden and <code>collapseTwo</code> is visible by default. After clicking link <code>Show brief</code>, make <code>collapseTwo</code> hidden and <code>collapseOne</code> is shown.</p>