R. Pülsinger R. Pülsinger - 5 months ago 19
jQuery Question

Three Level Accordion - Uncollapse 3rd Level by clicking the 1st level

I created a 3 Level Accordion. It almost works fine... But if the 3rd level is collapsed and i try to uncollapse(?) the 1st level, my 2nd level items will get invisible and my 3rd level items are still visible

Here the code:

<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

Would be nice if someone has an idea.

Thank you :)

Answer

its because your data-target="#demo1" which is pointed so when u click the target it will check the demo1 id but the second option is outside of the div so it wont close the div so u have to change the structure u have to move the 3 level inside the demo1 id.

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

change to

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

for refrence https://plnkr.co/edit/S39oZfRWuWf4YiKFRCRE?p=preview