Learn how to create Bootstrap accordion With Plus/Minus Icons. You can create toggleable accordion with plus minus icon with bootstrap.

When the accordion is open and close on click, the plus and minus icon change using the javascript given in the examples below.

Toggle Bootstrap Accordion With Plus/Minus Icons on Header Link Click

You can create Bootstrap accordion With Plus/Minus Icons. The accordion toggles on click of the anchor link given in the .panel-heading.

You need to first create an accordion given in the tutorial of Bootstrap Collapse. Add the <span> tag with the class .glyphicon.glyphicon-plus inside the .panel-title div.

You also need to add the javascript given below to toggle the plus/minus icon. The script replaces the icon each time the user clicks on the accordion.

Check the example below to understand how to create an accordion and add plus/minus icons.

Output

This is the collapsed content one.

This is the collapsed content two.

This is the collapsed content three.

Click the links given in the headings to toggle the accordion. The accordion will not toggle on click of heading to the other place except the link. If you want to create an accordion which toggles plus/minus icons on click of a header to anywhere, you have to read further.

Bootstrap Accordion With Plus/Minus Icons Toggle on Whole Header Click

To create an accordion to toggle on heading click on anywhere. You need to remove the attributes from the anchor link given in the heading and place attributes to the div with class .panel-heading. After placing the attributes, change the attribute href to data-target.

Check the example given below to understand the working and create your own accordion.

Output

An accordion is the way of representing or grouping a content in a collapsible manner. If the click the heading, the content will open and you can see the body of the content that contains the description.

You can add plus and minus icons to your accordion using the script and the glyphicon. Add few more classes given here, to get the required accordion.

You need to repeat the class panel-default and its inner content classes to create an accordion.

Create Bootstrap Accordion With Plus/Minus Icons to Toggle only on Click of Plus/Minus Icons

You can create Bootstrap accordion With Plus/Minus Icons to toggle only on click of the plus/minus icons and not on the anchor links or the headers. Put the attributes in the span tag used before the glyphicons.

See the example below to create the accordion.

Output

An accordion is the way of representing or grouping a content in a collapsible manner. If the click the heading, the content will open and you can see the body of the content that contains the description.

You can add plus and minus icons to your accordion using the script and the glyphicon. Add few more classes given here, to get the required accordion.

You need to repeat the class panel-default and its inner content classes to create an accordion.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.