How do I collapse a table row in Bootstrap?
You are using collapse on the div inside of your table row (tr). So when you collapse the div, the row is still there. You need to change it to where your id and class are on the tr instead of the div.
Change this:
<tr><td><div class="collapse out" id="collapseme">Should be collapsed</div></td></tr>
to this:
<tr class="collapse out" id="collapseme"><td><div>Should be collapsed</div></td></tr>
JSFiddle: http://jsfiddle.net/KnuU6/21/
EDIT: If you are unable to upgrade to 3.0.0, I found a JQuery workaround in 2.3.2:
Remove your data-toggle and data-target and add this JQuery to your button.
$(".btn").click(function() {
if($("#collapseme").hasClass("out")) {
$("#collapseme").addClass("in");
$("#collapseme").removeClass("out");
} else {
$("#collapseme").addClass("out");
$("#collapseme").removeClass("in");
}
});
JSFiddle: http://jsfiddle.net/KnuU6/25/
Bootstrap Collapse on table row is not animated
Instead of tr class="collapse" id="collapseProduct0" on the tr ... i just gave it to a new div which now covers the <div class="card card-body">... </div>; Doing this left a padding (from bootstrap) - to get rid of this padding, we introduced a new class which ensured that when the row is in collapsed state, there is nothing there.
Below code should get you what you're looking for...
.collapseContainingDiv td { padding: 0 !important;}<meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="card-body justify-content-center"> <p><a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseProduct" role="button" aria-expanded="false" aria-controls="collapseProduct">Animate div</a><button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#collapseProduct0" aria-expanded="false" aria-controls="collapseProduct0">Animate tr</button></p> <div class="collapse" id="collapseProduct" style=""> <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div> </div> <table class="table table-hover"> <tbody> <tr> <th>Name</th> <th>Description</th> <th>Product Group</th> <th class="text-center">Taxable</th> <th class="text-center">Tax Included</th> <th></th> </tr> <tr> <td>Bitwolf</td> <td>Focused value-added access</td> <td>Sepatu Futsal</td> <td class="text-center"><i class="fa fa-times text-danger"></i></td> <td class="text-center"><i class="fa fa-check text-info"></i></td> <td> <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct0" aria-expanded="false" aria-controls="collapseProduct0"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div> </td> </tr> <tr class="collapseContainingDiv"> <td colspan="6"> <div class="collapse" id="collapseProduct0" style=""> <div class="card card-body">SECOND Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div> </div> </td> </tr> <tr> <td>Keylex</td> <td>Focused client-driven groupware</td> <td>gtr</td> <td class="text-center"><i class="fa fa-times text-danger"></i></td> <td class="text-center"><i class="fa fa-times text-danger"></i></td> <td> <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct1" aria-expanded="false" aria-controls="collapseProduct1"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div> </td> </tr> <tr class="collapse" id="collapseProduct1" style=""> <td colspan="6"> <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div> </td> </tr> <tr> <td>Cardguard</td> <td>Realigned zero defect policy</td> <td>Sepatu Futsal</td> <td class="text-center"><i class="fa fa-times text-danger"></i></td> <td class="text-center"><i class="fa fa-check text-info"></i></td> <td> <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct2" aria-expanded="false" aria-controls="collapseProduct2"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div> </td> </tr> <tr class="collapse" id="collapseProduct2"> <td colspan="6"> <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div> </td> </tr> <tr> <td>Temp</td> <td>Monitored zero defect groupware</td> <td>Sepatu Bola</td> <td class="text-center"><i class="fa fa-check text-info"></i></td> <td class="text-center"><i class="fa fa-times text-danger"></i></td> <td> <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct3" aria-expanded="false" aria-controls="collapseProduct3"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div> </td> </tr> <tr class="collapse" id="collapseProduct3"> <td colspan="6"> <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div> </td> </tr> <tr> <td>Zontrax</td> <td>User-friendly multimedia interface</td> <td>gtr</td> <td class="text-center"><i class="fa fa-times text-danger"></i></td> <td class="text-center"><i class="fa fa-check text-info"></i></td> <td> <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct4" aria-expanded="false" aria-controls="collapseProduct4"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div> </td> </tr> <tr class="collapse" id="collapseProduct4"> <td colspan="6"> <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div> </td> </tr> <tr> <td>Andalax</td> <td>Assimilated global forecast</td> <td>gtr</td> <td class="text-center"><i class="fa fa-check text-info"></i></td> <td class="text-center"><i class="fa fa-check text-info"></i></td> <td> <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct5" aria-expanded="false" aria-controls="collapseProduct5"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div> </td> </tr> <tr class="collapse" id="collapseProduct5"> <td colspan="6"> <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div> </td> </tr> <tr> <td>Domainer</td> <td>Future-proofed intangible focus group</td> <td>Sepatu Bola</td> <td class="text-center"><i class="fa fa-times text-danger"></i></td> <td class="text-center"><i class="fa fa-times text-danger"></i></td> <td> <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct6" aria-expanded="false" aria-controls="collapseProduct6"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div> </td> </tr> <tr class="collapse" id="collapseProduct6"> <td colspan="6"> <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div> </td> </tr> </tbody> </table></div>Angular/Bootstrap - Toggle/collapse table row with specific ID?
Change your button to:
<span
class="badge badge-primary ml-1"
type="button"
data-toggle="collapse"
data-target="#collapseRow{{sale.id}}"
aria-expanded="false"
aria-controls="collapseRow"
>+</span>
and your row to:
<tr class="bg-light collapse" id="collapseRow{{sale.id}}">
<td colspan="10">
<div><span class="font-weight-bold">{{ 'Sales.AccountPayments.CustomerLocalId' | translate }}:</span>{{sale.accountPayments.customerLocalId}}</div>
<div><span class="font-weight-bold">{{ 'Sales.BonusAmount' | translate }}:</span>{{sale.creditBonusAmount | currency:'EUR'}}</div>
<div><span class="font-weight-bold">{{ 'Sales.RechargedBy' | translate }}:</span>{{sale.creditRechargeCustomer?.firstName}} {{sale.creditRechargeCustomer?.lastName}}</div>
</td>
</tr>
If you don't have an ID, use something else as long as this is unique.
how can i collapse all table rows
You can not use tbody inside another tbody
it is not legal HTML.
Follow this code ↓↓
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered table-sm "> <thead class="thead-dark"> <tr> <th></th> <th>head1</th> <th>head2</th> </tr> </thead> <tbody> <tr class="clickable" data-toggle="collapse" data-target=".group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1"> <td class="tigray">title1</td> <td class="tigray">35</td> <td class="tigray">35</td> </tr> </tbody>
<tbody id="" class="collapse group-of-rows-1"> <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2"> <td class="zoba">nested 1</td> <td class="zoba">29</td> <td class="zoba">29</td> </tr> </tbody>
<tbody id="group-of-rows-2" class="collapse"> <tr class="table-warning"> <td>nested title1</td> <td>13</td> <td>13</td> </tr> <tr class="table-warning"> <td>nested title2</td> <td>18</td> <td>13</td> </tr> <tr class="table-warning"> <td>nested title 3</td> <td>32</td> <td>13</td> </tr> </tbody> <tbody id="" class="collapse group-of-rows-1"> <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3"> <td class="zoba">nested 2</td> <td class="zoba">29</td> <td class="zoba">29</td> </tr> </tbody> <tbody id="group-of-rows-3" class="collapse"> <tr class="table-warning"> <td>nested title4</td> <td>13</td> <td>13</td> </tr> <tr class="table-warning"> <td>nested title5</td> <td>18</td> <td>13</td> </tr> <tr class="table-warning"> <td>nested title 6</td> <td>32</td> <td>13</td> </tr> </tbody></table>Bootstrap 4 merge Collapse with a Table
Come on! You can't have elements like <a></a> other than <tr> right after <tbody>. Hence your <a></a> is rendered outside of the table!
And since your <a></a> doesn't have any content, it's rendered kind of as hidden!
You don't have to use <a><a> as the collapse trigger. You can use any HTML element. You just need to initialize it with data-toggle="collapse". And since it's not an anchor tag, it doesn't have href. Don't worry. You can use data-target="xx" instead.
HTML
<div id="accordion">
<div class="card">
<div class="card-header">
<table>
<tbody>
<tr id="headingOne" data-toggle="collapse" data-target="#collapseOne">
...
</tr>
</tbody>
</table>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body"> ... </div>
</div>
</div>
<div class="card">
<div class="card-header">...</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body"> ... </div>
</div>
</div>
<div class="card">
<div class="card-header">...</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body"> ... </div>
</div>
</div>
</div>
CSS (SASS)
You can apply a little bit of CSS to make the row look like a link / clickable.
#headingOne {
cursor: pointer;
color: var(--primary);
}
Result
demo: https://jsfiddle.net/davidliang2008/1t5gaf49/
Change Caret
I see you also want to change carets after clicking each collapsable. This is easy to accomplish with just CSS because when the collapsable collapses, bootstrap adds .collapsed class there. You can change the font-awesome icon's content to either display left arrow or down arrow based on that.
HTML
<a class="collapsed" data-toggle="collapse">
Collapsible Group Item
<span class="float-right">
<i class="fa"></i>
</span>
</a>
CSS (SASS)
[data-toggle="collapse"] {
.fa:after {
content: '\f078'; /* chevron-down */
}
&.collapsed {
.fa:after {
content: '\f054'; /* chevron-right */
}
}
}
Result
demo: https://jsfiddle.net/davidliang2008/e75h3asb/
Bootstrap Collapsing Table
Instead of id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" use this example. https://jsfiddle.net/ayang10/DTcHh/33622/
<tr data-toggle="collapse" data-target=".order1">
<td>+</td>
<td>1001</td>
<td>9/29/2016</td>
<td>$126.27</td>
</tr>
<tr class="collapse order1">
<td>1</td>
<td></td>
<td>Shirt</td>
<td>$12.27</td>
</tr>
<tr class="collapse order1">
<td>1</td>
<td></td>
<td>Shoes</td>
<td>$62.27</td>
</tr>
How to make accordion table with bootstrap 5?
The problem is white-space: nowrap; that's set on .table-responsive. remove it...
.table-responsive {
border-radius: 30px;
}
Then the collapse expands as expected and doesn't effect the table width.
https://codeply.com/p/7Gmd6ApWHX
But the HTML is improperly structured because the tr are wrapped in div. instead make the tr the accordion collapse items...
https://codeply.com/p/MNPQYPyHQQ
Bootstrap collapsing table row when clicking button in table row
Answering the original question as well as the one in comment.
When you click on the button, the event bubbles up and gets fired on the row element, that's why click handler of row (which toggles the section) also works.
To prevent it, you can stop the click event from bubbling up, by callingevent.stopPropagation()in reset button's click handler.The
decollapseis slow, because Bootstrap by default applies class.collapsingduring the toggling process. This allows to apply some animation. Seems by default it just animates the height of the element. However in your case the animation doesn't work, because the height of the table row can't get less than the content height, but the delay for the intended animation is still exists.
You candisablethe animation by overriding the defaulttransitionbynonelike I did below, or just use something else other than tables, e.g.div.
So here is the updated version of your code as per my comments:
.collapsing { -webkit-transition: none !important; transition: none !important; display: none;}<!DOCTYPE html><html>
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /></head>
<body> <div class="container body-content"> <table class="table m-0"> <thead class="thead-light"> <tr> <th> <span class="d-inline-block align-middle">table head</span> <button type="button" class="btn btn-secondary btn-sm float-right">button text</button> </th> </tr> </thead> <tbody> <tr data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2"> <td> table content <div class="btn-group float-right align-top" onclick=";"> <button type="button" class="btn btn-warning" onclick="alert('reset!');event.stopPropagation();">reset</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu bg-danger"> <a class="dropdown-item bg-danger text-white" onclick="alert('delete!');">delete</a> </div> </div> </td> </tr> <tr class="collapse" id="collapse2"> <td> <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 1"> <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #1AFF00" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 1</div> </div> <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 2"> <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #2B00FF" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 2</div> </div> </td> </tr> </tbody> </table> <script> $(window).on('load', function () { $('[data-toggle="tooltip"]').tooltip(); }); </script> </div></body>
</html>Bootstrap collapsing whole table
If you are able to place your tables inside of a panel (using Bootstrap 3.2 - for example), you can then collapse the panel-body element without using javascript. Here is an example:
<div class="panel panel-primary accordion"> <!-- Panel (collapasable) -->
<div class="panel-heading"> <!-- Panel head -->
<a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapseOne">
Collapse Me On Click!
</a>
</div> <!-- END Panel head -->
<div id="collapseOne" class="panel-collapse collapse in"> <!-- Collapsable section -->
<div class="panel-body"> <!-- Panel body -->
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div> <!-- END Panel body -->
</div> <!-- END Collapse section -->
</div>
CSS (not really needed):
a {
color: white;
}
table {
width: 100%;
}
tr {
border: solid 1px;
}
And a Fiddle
Related Topics
Can Bootstrap (4) Be Integrated Along with Angular Material (2)
Force Address Bar to Show in Mobile Chrome App
How to Open Bootstrap Modal in Ajax Success
Adding to Script Bundle from Partial View in .Net MVC 5
A Way to Count Columns in a Responsive Grid
Best Way to Make Bootstrap Responsive Based on Parent Div
Test If a Browser Supports a CSS Selector
Access the -Webkit- Vendor Prefix in JavaScript
How to Scroll Draw Each Svg Path One at a Time (Chronologically)
Bootstrap 3 > Trying to Create Columns with Equal Heights
Images Are Being Rotated by Default Upon Upload
How to Set a External Svg Color in HTML Using CSS
Can You Do a JavaScript for Loop Inside of Less CSS
How to Add !Important to a Stylesheet Rule Using JavaScript
How to Know What Elements Are in Current Mouse Position
Javascript: Change CSS File Dynamically + Cookie