CODEWITHSUNDEEP
twitter-bootstraphtml-tableaccordion
NoobTemplar
NoobTemplar

Reputation: 23

Correctly create bootstrap accordion in html table

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.

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.

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?

<body>
<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 id ="accordion" class="accordion-group">
        <tr>
            <td data-toggle="collapse" data-target="#demo1" class="accordion-toggle" data-parent="#accordion">1</td>
             <td data-toggle="collapse" data-target="#demo22" class="accordion-toggle" data-parent="#accordion">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 >
            <td colspan="6" class="hiddenRow">
                <div class=" accordian-body collapse" id="demo1"> Demo1 </div>
                <div class="accordian-body collapse" id="demo22"> Demo22 </div>
            </td>
        </tr>
    </tbody>    
    <tbody>
        <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>
            <td colspan="6" class="hiddenRow"><div id="demo2" class="accordian-body collapse">Demo2</div></td>
        </tr>
        <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
            <td>3</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">$500.00</td>
            <td class="text-error"></td>
            <td class="text-success">$661.00</td>
        </tr>
        <tr>
            <td colspan="6"  class="hiddenRow"><div id="demo3" class="accordian-body collapse">Demo3</div></td>
        </tr>
    </tbody>
</table>
</body>

http://jsfiddle.net/2Dj7Y/2082/

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.

Upvotes: 2

Views: 19070

Answers (1)

vanburen
vanburen

Reputation: 21663

See if this helps: I believe this is what you're trying to do and if so it's just your data targets are off slightly.

$('.accordian-body').on('show.bs.collapse', function () {
    $(this).closest("table")
        .find(".collapse.in")
        .not(this)
        .collapse('toggle')
})
tbody tr.info td:hover {
  background-color: #266080;
  color: #fff;
  -webkit-transition-duration: 500ms;
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3>Collapsing Tables</h3>

    </div>
    <div class="panel-body">
      <table class="table table-condensed">
        <thead>
          <tr>
            <th>Name</th>
            <th>Date</th>
            <th>EMail</th>
            <th>Phone</th>
            <th>ID #</th>
          </tr>
        </thead>
        <tbody>
          <tr class="info">
            <td data-toggle="collapse" data-target="#table1" class="accordion-toggle">One</td>
            <td data-toggle="collapse" data-target="#table2" class="accordion-toggle">Two</td>
            <td data-toggle="collapse" data-target="#table3" class="accordion-toggle">Three</td>
            <td data-toggle="collapse" data-target="#table4" class="accordion-toggle">Four</td>
            <td data-toggle="collapse" data-target="#table5" class="accordion-toggle">Five</td>
          </tr>
          <tr>
            <td colspan="12" class="hiddenRow">
              <table class="table table-striped">
                <thead>
                  <tr class="accordian-body collapse" id="table1">
                    <td><a href="#">Link</a>

                    </td>
                    <td>Sub-A</td>
                    <td>Sub-B</td>
                  </tr>
                  <tr class="accordian-body collapse" id="table2">
                    <th>One-A</th>
                    <th>Two-A</th>
                    <th>Three-A</th>
                    <th>Four-A</th>
                    <th>Five-A</th>
                    <th>Six-A</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="accordian-body collapse" id="table3">
                    <td>One-B</td>
                    <td>Two-B</td>
                    <td>Three-B</td>
                    <td>Four-B</td>
                    <td>Five-B</td>
                    <td>Six-B</td>
                  </tr>
                  <tr class="accordian-body collapse" id="table4">
                    <td>One-C</td>
                    <td>Two-C</td>
                    <td>Three-C</td>
                    <td>Four-C</td>
                    <td>Five-C</td>
                    <td>Six-C</td>
                  </tr>
                  <tr class="accordian-body collapse" id="table5">
                    <td>One-D</td>
                    <td>Two-D</td>
                    <td>Three-D</td>
                    <td>Four-D</td>
                    <td>Five-D</td>
                    <td>Six-D</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions