I have been working on a bootstrap panel that consists of three panels: Panel 1, Panel 2, and Panel 3. The functionality of this panel is working correctly under normal circumstances.
My Approach:
- Clicking on Panel 1 should display its content while hiding both Panel 2 and Panel 3.
- Similarly, clicking on Panel 2 should show its content while hiding Panel 1 and Panel 3.
- Finally, clicking on Panel 3 should reveal its content while concealing both Panel 1 and Panel 2.
https://i.sstatic.net/STXw3.png
However, I also want to optimize the space usage. This means that the active panel should always appear first so that the layout remains organized (All active panels must be positioned at the top).
This is the code snippet I am currently using:
HTML
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Panel #1<span class="glyphicon glyphicon-chevron-up"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
panel 1 content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Panel #2 <span class="glyphicon glyphicon-chevron-up"></span>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
panel 2 content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Panel #3<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
panel 3 content
</div>
</div>
</div>
</div>
</div>
Script :
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon glyphicon-chevron-down").addClass("glyphicon glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon glyphicon-chevron-up").addClass("glyphicon glyphicon-chevron-down");
});
Does anyone have any suggestions on how I can achieve this with Bootstrap's collapse panel?