Crash on loading not adding .collapsed when using class selector
I am using Bootstrap 3.3.4. I have a panel with a header and footer and a glyphicon to indicate the open / closed state of the panel.
If I use the panel body id as a selector for the collapse, then Bootstrap correctly applies the class .collapsed
to the title and glyphicon changes. However, I want to collapse the footer as well, so I changed it to use the class selector to collapse. The good news is that the footer is also crumbling; the bad news is that it .collapsed
no longer applies to the title and therefore the glyphicon does not change.
CSS
.collapsible {
cursor: pointer;
}
.panel-heading.collapsible:after {
font-family:"Glyphicons Halflings";
content:"\e114";
float: right;
color: darkslategary;
}
.panel-heading.collapsible.collapsed:after {
content:"\e080";
}
Html
<div class="panel">
<div id="theHeader2" class="panel-heading collapsible" data-target=".shrinkme" data-toggle="collapse">Collapse</div>
<div id="theBody2" class="panel-body shrinkme collapse in">
nim pariatur cliche reprehenderit, enim eiusmod high life
</div>
<div id="theFooter2" class="panel-footer shrinkme collapse in">
<button class="btn btn-default">
<span class="glyphicon glyphicon-tree-deciduous"></span>
</button>
</div>
</div>
jsFiddle demonstrating both selectors
Am I doing what keeps .collapsed
me from applying? How can I collapse the body and footer when clicking on the header?
source to share
Here's the answer:
- Make the footer panel a child of the chassis panel.
- Use the class
panel-collapse
on the body panel insteadpanel
The first item is the key; the second is for the right style. I came across a solution after reading this problem .
Here is an updated jsFiddle with updated HTML.
Updated HTML
<div class="panel">
<div id="theHeader" class="panel-heading collapsible" data-target="#theBody" data-toggle="collapse">Collapse using id as the selector</div>
<div id="theBody" class="panel-collapse collapse in">nim pariatur cliche reprehenderit, enim eiusmod high life.
<div id="theFooter" class="panel-footer collapse in">
<button class="btn btn-default"> <span class="glyphicon glyphicon-grain"></span>
</button>
</div>
</div>
</div>
source to share
Actually there is a workaround, the data target works with the class selector but doesn't actually change the parent class.
In the parent element, you can handle the onClick event like:
onClick="(e) => { e.currentTarget.classList.contains("collaspsed") ? e.currentTarget.classList.remove("collaspsed") : e.currentTarget.classList.add("collaspsed"); }"
source to share