Menu
I am using Bootstrap 2.3.2 in my app and I need to completely hide a row using the collapse plugin. Below is an example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Collapse test</title> <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/jquery.js"></script> <script src="js/bootstrap-collapse.js"></script> </head> <body> <table class="table table-bordered table-striped"> <tr> <td> <button type="button" class="btn" data-toggle="collapse" data-target="#collapseme"> Click to expand </button> </td> </tr> <tr><td><div class="collapse out" id="collapseme">Should be collapsed</div></td></tr> </table> </body> </html> This will correctly show and hide the contents of the row, but the collapsed row is still visible. See this screenshot:
The grey line in the screenshot shows the extra row. What can I do to completely remove this row from view?
404
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
Double-click the item that you want to expand or collapse. Right-click the item, click Expand/Collapse, and then do one of the following: To see the details for the current item, click Expand. To hide the details for the current item, click Collapse.
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
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/
196
I just came up with the same problem since we still use bootstrap 2.3.2.
My solution for this: http://jsfiddle.net/KnuU6/281/
css:
.myCollapse { display: none; } .myCollapse.in { display: block; } javascript:
$("[data-toggle=myCollapse]").click(function( ev ) { ev.preventDefault(); var target; if (this.hasAttribute('data-target')) { target = $(this.getAttribute('data-target')); } else { target = $(this.getAttribute('href')); }; target.toggleClass("in"); }); html:
<table> <tr><td><a href="#demo" data-toggle="myCollapse">Click me to toggle next row</a></td></tr> <tr class="collapse" id="#demo"><td>You can collapse and expand me.</td></tr> </table> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
