title: Bootstrap - Collapsible Table - Need to expand only one row at a time
body: <p>I created a bootstrap collapsible table example. Here follows the for the link as comment of this question. <a href="http://jsfiddle.net/whytheday/2Dj7Y/11/" rel="nofollow">Fiddle</a></p>
  
  <p>But here it can possible expand more than one row at a time. </p>
  
  <p>But I need only one row can expand at a time, while going to expand another row the previous expanded row become automatically collapsed. </p>
  
  <p>Is it possible?</p>
  
  <p><strong>My Code</strong> :</p>
  
  <pre><code>&lt;table class="table table-condensed" style="border-collapse:collapse;"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;#&lt;/th&gt;
              &lt;th&gt;Date&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;
              &lt;th&gt;Credit&lt;/th&gt;
              &lt;th&gt;Debit&lt;/th&gt;
              &lt;th&gt;Balance&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle"&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;05 May 2013&lt;/td&gt;
              &lt;td&gt;Credit Account&lt;/td&gt;
              &lt;td class="text-success"&gt;$150.00&lt;/td&gt;
              &lt;td class="text-error"&gt;&lt;/td&gt;
              &lt;td class="text-success"&gt;$150.00&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr &gt;
              &lt;td colspan="6" class="hiddenRow"&gt;&lt;div class="accordian-body collapse" id="demo1"&gt; Demo1 &lt;/div&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle"&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;05 May 2013&lt;/td&gt;
              &lt;td&gt;Credit Account&lt;/td&gt;
              &lt;td class="text-success"&gt;$11.00&lt;/td&gt;
              &lt;td class="text-error"&gt;&lt;/td&gt;
              &lt;td class="text-success"&gt;$161.00&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="6" class="hiddenRow"&gt;&lt;div id="demo2" class="accordian-body collapse"&gt;Demo2&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle"&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;05 May 2013&lt;/td&gt;
              &lt;td&gt;Credit Account&lt;/td&gt;
              &lt;td class="text-success"&gt;$500.00&lt;/td&gt;
              &lt;td class="text-error"&gt;&lt;/td&gt;
              &lt;td class="text-success"&gt;$661.00&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="6"  class="hiddenRow"&gt;&lt;div id="demo3" class="accordian-body collapse"&gt;Demo3&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>