Expand collapse panel with toggle icon in Bootstrap

Expand collapse panel with toggle icon in Bootstrap

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:

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.

Now visit the page and let the users enjoy expand collapse panel with toggle icon in your Bootstrap project.

You Might Interested In

  • aRNoLD

    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.

    • Amit Sonkhiya

      Hi Arnold,

      Please view the last code section carefully which performs the toggling of icon on click.

  • Bill Hogsett

    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.

    • Amit Sonkhiya

      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