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?
This question is related to
javascript
css
twitter-bootstrap
The answer is
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>
You can do this without any JavaScript involved
(Using accepted answer)
HTML
<table class="table table-bordered table-striped">
<tr>
<td><button class="btn" data-target="#collapseme" data-toggle="collapse" type="button">Click to expand</button></td>
</tr>
<tr>
<td class="nopadding">
<div class="collapse" id="collapseme">
<div class="content">
Show me collapsed
</div>
</div>
</td>
</tr>
</table>
CSS
.nopadding {
padding: 0 !important;
}
.content {
padding: 20px;
}
You just need to set the table cell padding to zero. Here's a jsfiddle (using Bootstrap 2.3.2) with your code slightly modified:
http://jsfiddle.net/marciowerner/fhjgn7b5/4/
The javascript is optional and only needed if you want to use a cell padding other than zero.
$('.collapse').on('show.bs.collapse', function() {_x000D_
$(this).parent().removeClass("zeroPadding");_x000D_
});_x000D_
_x000D_
$('.collapse').on('hide.bs.collapse', function() {_x000D_
$(this).parent().addClass("zeroPadding");_x000D_
});.zeroPadding {_x000D_
padding: 0 !important;_x000D_
}<head>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>_x000D_
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>_x000D_
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<table class="table table-bordered table-striped">_x000D_
<tr>_x000D_
<td>_x000D_
<button type="button" class="btn" data-toggle="collapse" data-target="#collapseme">Click to expand</button>_x000D_
</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td class="zeroPadding">_x000D_
<div class="collapse out" id="collapseme">Should be collapsed</div>_x000D_
</td>_x000D_
</tr>_x000D_
</table>_x000D_
</body>Which version of Bootstrap are you using? I was perplexed that I could get @Chad's solution to work in jsfiddle, but not locally. So, I checked the version of Bootstrap used by jsfiddle, and it's using a 3.0.0-rc1 release, while the default download on getbootstrap.com is version 2.3.2.
In 2.3.2 the collapse class wasn't getting replaced by the in class. The in class was simply getting appended when the button was clicked. In version 3.0.0-rc1, the collapse class correctly is removed, and the <tr> collapses.
Use @Chad's solution for the html, and try using these links for referencing Bootstrap:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
problem is that the collapse item (div) is nested in the table elements. The div is hidden, the tr and td of the table are still visible and some css-styles are applied to them (border and padding).
Why are you using tables? Is there a reason for? When you dont´t have to use them, dont´use them :-)
Source: Stackoverflow.com