title: Correctly create bootstrap accordion in html table
body: <p>I found several questions similar to what I was trying to accomplish and actually took one of the examples and tried to adapt to do what I want to achieve to no avail.</p>
  
  <p>I want to be able to create a bootstrap accordion inside of a regular html table but I just can't seem to get it right. If I click on the first cell, it expands the accordion's div, but then when I click on the second cell, that cell too shows. How can I make it properly obey the accordion style in that clicking a single cell will only collapse/expand a single section at a time.</p>
  
  <p>I'm okay with multiple rows being expanded, and I feel like there is something obvious I'm missing or doing wrong. I have been at this for a few hours and the answer is still eluding me. Can anyone tell me what I'm doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &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 id ="accordion" class="accordion-group"&gt;
          &lt;tr&gt;
              &lt;td data-toggle="collapse" data-target="#demo1" class="accordion-toggle" data-parent="#accordion"&gt;1&lt;/td&gt;
               &lt;td data-toggle="collapse" data-target="#demo22" class="accordion-toggle" data-parent="#accordion"&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;div class="accordian-body collapse" id="demo22"&gt; Demo22 &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;    
      &lt;tbody&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;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/2Dj7Y/2082/" rel="nofollow noreferrer">http://jsfiddle.net/2Dj7Y/2082/</a></p>
  
  <p>I'm able to create a similar table structure using all divs and bootstrap columns which is not hard, but I want a pure html table structure. I was going to try to use this in an angular directive and combine it with other code I have that runs on tables.</p>