bootstrap div collapse and expand
Question
I want to expand and collapse div elements with same id seperately when i click different buttons.
here is my HTML code
<body>
<button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
<span class="glyphicon glyphicon-collapse-down"></span> Show Status
</button>
<div class="collapse" id="dem">
<p>This is first</p>
</div>
<button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
<span class="glyphicon glyphicon-collapse-down"></span> Show Status
</button>
<div class="collapse" id="dem">
<p>This is Second</p>
</div>
<button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
<span class="glyphicon glyphicon-collapse-down"></span> Show Status
</button>
<div class="collapse" id="dem">
<p>This is Third</p>
</div>
</body>
Here is my script
$(function(){
$('#dem').on('show.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide Status');
})
$('#dem').on('hide.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show Status');
})
})
When I click the first button it expands and when I click second or third button the content of first button collapses.The content is not expanding for other buttons.I know I am missing some script code but i don't know what the code is.
1 answers
solution1
5 ACCPTED 2014-12-04 16:38:23
IDs should always be DISTINCT.
Change these to classes ... since you are using jQuery, you can do something like this inside the click events ...
$(".className").hide()
$(".className").show()
$(".className").toggle()
Assuming they have different ID, the change would simply be something like ...
$("#button1").on('click', function() {
if ($(this).is(":visible")) {
$(".className").hide()
} else {
$(".className").show()
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.