Twitter Bootstrap is being used popularly due to its powerful responsive front-end capabilities. One among its components ‘Panel‘ is used for accordion and we can expand or collapse its body content by clicking on link inside panel heading. But I wanted to expand collapse panel with toggle icon in Bootstrap which are placed on right side inside panel heading as shown in the image below and the icons get changed according to visibility of content in panel.
Expand collapse panel with toggle icon in Bootstrap
After reading this tutorial, you will find to obtain this functionality super easy. I’m assuming that you have already included required Bootstrap resources.
Here is my markup that I used into html:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="panel-group" id="panel-quote-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <strong>QUOTE OF THE DAY</strong> <span class="pull-right"> <a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote"> <span class="toggle-icon glyphicon glyphicon-collapse-up"></span> </a> </span> </h4> </div> <div id="collapseQuote" class="panel-collapse collapse in"> <div class="panel-body"> <blockquote> <p>When I am working on a problem I never think about beauty. I only think about how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong.</p> <footer><cite title="Source Title">Buckminster Fuller</cite> (1895-1983)</footer> </blockquote> </div> </div> </div> </div> |
I’m using Bootstrap’s JavaScript ‘collapse‘ plugin and I have placed a ‘glyphicon‘ icon inside expand-collapse link which is further placed at the right of panel heading with help of ‘pull-right‘ class.
Now with help of powerful ‘data-‘ API the expand collapse will start working but the icon won’t toggle so to change the icon I have to write a bit script that fires the click event on this element (span with ‘toggle-icon’ class) and handy toggleClass() function in jQuery does the rest of the work.
0 1 2 3 4 5 6 7 | <script type="text/javascript"> $(document).ready(function () { $('a[data-toggle="collapse"]').click(function () { $(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down'); }) }) </script> |
Now visit the page and let the users enjoy expand collapse panel with toggle icon in your Bootstrap project.
i have a problem with this. The chevron changes state correctly when a panel (say 2) is clicked, but if another panel(say 1) is clicked the chevron does not change in panel 2 to the down state.
Hello Bill
This code in made to just work with single panel. You have to make bit up-gradation in code if you want to work them with group of panels. If you wish us to do the same for you then please write us to support@fellowtuts.com
I think this is a good idea, but when clicked and showing the down status, the icon needs to be switched to up status. This is not done in the scripts.
Hi Arnold,
Please view the last code section carefully which performs the toggling of icon on click.