Accordion is an element used to expand and collapse content that is broken into logical sections, much like tabs. It allows users to toggle the display of sections of content.
Bootstrap Simple Accordion
Bootstrap provides accordion to be used when there is a need for minimalistic way to show data. In this user will see the data of expanded accordion. Rest will be in hidden mode.
Propeller Accordion consists of Bootstrap HTML structure with Propeller customized classes based on material design standards. Add
.pmd-accordion to your wrapper div to use Material accordion.
Inbox like Accordion
This accordion makes use of animation like that of Google Inbox to display the expanded view of data. In this way user will get more focus on the information inside the accordion. Add
.pmd-accordion-inbox to your wrapper div to use Inbox like accordion.
Accordion with No Space
This Accordion is similar to Propeller Accordion with no space between accordion panels. Add
.pmd-accordion-nospace to your wrapper div to create Propeller accordion.
Accordion With All Expandable
When the users are typically interested in more than one piece of content in alternative content blocks, this accordion is useful. This is especially the case if users often return to review content in different content blocks. The user can open all expanders with content of interest and leave them open for reference or comparison.
Accordion with Icons
Icon plays an important role when it comes to visualisation. Icon gives user a visual hint of what the name of the accordian is all about.
Accordion with colored icon
You can also create an accordian with colored icons. Add
.panel-info to your panel div.