CODEWITHSUNDEEP
twitter-bootstraphtml-tableaccordion
Sufian Khan
Sufian Khan

Reputation: 21

Bootstrap accordion table smooth open and close

I want to create a Bootstrap accordion table. When the row is clicked, it will open the sub rows. They open nicely, but the problem is it's not smooth. I've tried almost everything, but none of those worked.

<table class="table table-hover">
<thead>


 <tr>
    <th>
    <label class="inputcheck inputcheck-lg">
    <input type="checkbox" id="checkall">
    <span class="icon"><i class="fa fa-check"></i></span>
    </label>
    </th>
    <th>Business Name</th>
    <th>Category</th>
    <th>Sub Category</th>
    <th>Free Leads</th>
    <th>Paid Leads</th>
    <th>Campaign</th>
    <th>Status</th>
</tr>
</thead>



 <tbody>

    <tr data-toggle="collapse" data-target=".subrow1">
    <td>
    <label class="inputcheck">
    <input type="checkbox" class="subcheck">
    <span class="icon"><i class="fa fa-check"></i></span>
    </label>
    </td>
    <td> <span class="chevron_toggleable glyphicon glyphicon-plus"></span> New Vision Electric</td>
    <td>HVAC</td>
    <td>Air Conditioning </td>
    <td>05</td>
    <td>10</td>
    <td>HVAC Campaign 01</td>
    <td>
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked>
    </td>
    </tr>

    <tr class="collapse subrows subrow1 uk-animation-2">
    <td>
    <label class="inputcheck">
    <input type="checkbox" class="subcheck">
    <span class="icon"><i class="fa fa-check"></i></span>
    </label>
    </td>
    <td> </td>
    <td>HVAC</td>
    <td>Air Conditioning </td>
    <td>05</td>
    <td>10</td>
    <td>HVAC Campaign 01</td>
    <td>
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked>
    </td>
    </tr>

    <tr class="collapse subrows subrow1 uk-animation-3">
    <td>
    <label class="inputcheck">
    <input type="checkbox" class="subcheck">
    <span class="icon"><i class="fa fa-check"></i></span>
    </label>
    </td>
    <td></td>
    <td>HVAC</td>
    <td>Air Conditioning </td>
    <td>05</td>
    <td>10</td>
    <td>HVAC Campaign 01</td>
    <td>
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked>
    </td>
    </tr>

    <tr class="collapse subrows subrow1 uk-animation-4">
    <td>
    <label class="inputcheck">
    <input type="checkbox" class="subcheck">
    <span class="icon"><i class="fa fa-check"></i></span>
    </label>
    </td>
    <td></td>
    <td>HVAC</td>
    <td>Air Conditioning </td>
    <td>05</td>
    <td>10</td>
    <td>HVAC Campaign 01</td>
    <td>
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked>
    </td>
    </tr>

    <tr data-toggle="collapse" data-target=".subrow2">
    <th scope="row">
    <label class="inputcheck">
    <input type="checkbox" class="subcheck">
    <span class="icon"><i class="fa fa-check"></i></span>
    </label>
    </th>
    <td> <span class="chevron_toggleable glyphicon glyphicon-plus"></span> New Vision Electric</td>
    <td>HVAC</td>
    <td>Air Conditioning </td>
    <td>05</td>
    <td>10</td>
    <td>HVAC Campaign 01</td>
    <td>
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked>
    </td>
    </tr>

    <tr class="collapse fade subrows subrow2">
    <th scope="row">
    <label class="inputcheck">
    <input type="checkbox" class="subcheck">
    <span class="icon"><i class="fa fa-check"></i></span>
    </label>
    </th>
    <td>New Sub Row 3 </td>
    <td>HVAC</td>
    <td>Air Conditioning </td>
    <td>05</td>
    <td>10</td>
    <td>HVAC Campaign 01</td>
    <td>
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked>
    </td>
    </tr>

    <tr class="collapse fade subrows subrow2">
    <th scope="row">
    <label class="inputcheck">
    <input type="checkbox" class="subcheck">
    <span class="icon"><i class="fa fa-check"></i></span>
    </label>
    </th>
    <td>New Sub Row 3 </td>
    <td>HVAC</td>
    <td>Air Conditioning </td>
    <td>05</td>
    <td>10</td>
    <td>HVAC Campaign 01</td>
    <td>
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked>
    </td>
    </tr>

    <tr>
    <th scope="row">
    <label class="inputcheck">
    <input type="checkbox" class="subcheck">
    <span class="icon"><i class="fa fa-check"></i></span>
    </label>
    </th>
    <td>New Vision Electric</td>
    <td>HVAC</td>
    <td>Air Conditioning </td>
    <td>05</td>
    <td>10</td>
    <td>Not Assigned</td>
    <td>
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox">
    </td>
    </tr>

    <tr class="">
    <th scope="row">
    <label class="inputcheck">
    <input type="checkbox" class="subcheck">
    <span class="icon"><i class="fa fa-check"></i></span>
    </label>
    </th>
    <td>New Vision Electric</td>
    <td>HVAC</td>
    <td>Air Conditioning </td>
    <td>05</td>
    <td>10</td>
    <td>HVAC Campaign 01</td>
    <td>
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked>
    </td>
    </tr>

    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>

    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </tbody>

</table>

Demo : https://jsfiddle.net/d2hfbh1p/

Upvotes: 2

Views: 1268

Answers (1)

Christian Wico
Christian Wico

Reputation: 112

You should always avoid trying to perform the collapses upon the actual item to be collapsed.

When trying to collapse an element, what you should do is wrap the element inside a <div> tag and add the .collapse class to the <div>. To complete it, the data-target should target the <div> element that you want to collapse.

<tr data-toggle="collapse" data-target=".subrow1>
...
<div class="collapse subrow1">
    <tr class=...>...
</div>

Upvotes: 1

Related Questions