I am exploring ways to create a collapsible section with arrow icons (right and down arrows) in jQuery or JavaScript. Can anyone provide guidance on how to convert my CSS styling into jQuery code?
Below is the jQuery approach I have attempted:
$(document).ready(function(){
$(".collapse").on("hide.bs.collapse", function(){
$(".arrows").after().css({"content":"\e080","font-family": "Glyphicons Halflings"});
});
$(".collapse").on("show.bs.collapse", function(){
$(".arrows").after().css({"content":"\e114","font-family": "Glyphicons Halflings"});
});
});
Here's the corresponding CSS code:
.arrows:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
.arrows.collapsed:after {
font-family: "Glyphicons Halflings";
content: "\e080";
}
Lastly, here is the HTML structure being used:
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel <span class="arrows"></span></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>