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.

Expand collapse panel with toggle icon in Bootstrap

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

4 COMMENTS

  1. Bill Hogsett says:

    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.

    Reply
    1. Amit Sonkhiya says:

      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

      Reply
  2. aRNoLD says:

    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.

    Reply

Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.