3レベルアコーディオン - Uncollapse第1レベルをクリックして第3レベル

Question

3レベルアコーディオンを作成しました。それはほぼ正常に動作します...しかし、第3レベルが崩壊し、私は第1レベルをuncollapse（？）しようとすると、私の第2レベルの項目は見えなくなり、私の第3レベルの項目はまだ表示されます

ここにコード：

誰かがアイデアを持っている場合

<table class="table table-condensed" style="border-collapse:collapse;"> 
<thead> 
    <tr> 
     <th>#</th> 
     <th>Date</th> 
     <th>Description</th> 
     <th>Credit</th> 
     <th>Debit</th> 
     <th>Balance</th> 
    </tr> 
</thead> 
<tbody> 
    <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle"> 
     <td>1</td> 
     <td>05 May 2013</td> 
     <td>Credit Account</td> 
     <td class="text-success">$150.00</td> 
     <td class="text-error"></td> 
     <td class="text-success">$150.00</td> 
    </tr> 
    <tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle"> 
     <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 </div> </td> 
    </tr> 
    <tr> 
     <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 </div> </td> 
    </tr> 
    <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle"> 
     <td>2</td> 
     <td>05 May 2013</td> 
     <td>Credit Account</td> 
     <td class="text-success">$11.00</td> 
     <td class="text-error"></td> 
     <td class="text-success">$161.00</td> 
    </tr> 
    <tr data-toggle="collapse" data-target="#demo21" class="accordion-toggle"> 
     <td colspan="6" class="hiddenRow"><div id="demo2" class="accordian-body collapse">Demo2</div></td> 
    </tr> 
    <tr> 
     <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo21"> Demo21 </div> </td> 
    </tr> 

</tbody> 

JSFiddle Example

がいいだろう。

ありがとうございました:)

Answer 1

をそのuは、ターゲットをクリックしたとき、それはDEMO1 IDをチェックしますので、指摘が、2番目のオプションは文句を言わないそれそうのdivの外にあるされ、データ・ターゲット=「＃1 DEMO1」ので、 divを閉じて、構造体を変更する必要があります。あなたはdemo1 id内の3つのレベルを移動する必要があります。

<tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle"> 
      <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 </div> </td> 
     </tr> 
     <tr> 
      <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 </div> </td> 
     </tr> 

変更refrence https://plnkr.co/edit/S39oZfRWuWf4YiKFRCRE?p=previewため

<tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle"> 
      <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 
       <div> 
       <div colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 tytjtyty</div>   </div> 
      </div> 
      </div> </td> 
     </tr> 

に