Close

Bootstrap Accordion example with expand/collapse all

This is an excellent example of the accordion with “expand all and collapse all” button. The HTML is simple with the bootstrap accordion with the panel and data-toggling behavior defined. The CSS defined the styles for each tag, check out the “:: after” selector tag, which selects the panel-default and panel-heading and add the given styles after they are selected. Notice the change in the expandable button which is at the right of accordion, once clicked it rotates 180deg, this styling is done using CSS for aria-expended. This indicates the state of the collapsible element. This aria-expanded can be used with menus or list or any other collapsible items. The expand all and collapsible all button work using javascript. Check out the functions which open up all the accordion when clicked on "expand all" and "close all" when clicked on close all accordion. Use this to your website with large content and paragraphs.

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.