Bootstrap 4 Accordion examples with Material Design in Propeller Pro

Bootstrap 4 Accordion

Bootstrap 4 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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Propeller Accordion

Propeller Accordion consists of Bootstrap 4 HTML structure with Propeller customized classes based on material design standards. Add .pmd-accordion to your wrapper div to use Material accordion.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Accordion with No Space

Add .pmd-accordion-nospace to your wrapper div to remove the space between the cards of the accordion.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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 accordion is all about.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Accordion with colored background

Add .bg-* to the accordion cards to create an accordion with colored bacgrounds.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the accordion. Apart from the Bootstrap 4 classes, add Propeller customized classes to enhance your code. The table lists the available classes and their effects.

Propeller Class	Effect	Remark
`.pmd-accordion`	Defines Propeller customized Accordion.	Optional
`.pmd-accordion-inbox`	Add this class to create an accordion of the type of Google Inbox.	Optional
`.pmd-accordion-nospace`	Add this class to create accordion complying with the google material design standards.	Optional

jQuery plugin

Call the jQuery plugin to initialize the Accordion while fetching the data dynamically.

Methods

See here for more documentation on this.

Method	Description
`$().collapse(options)`	Activates your content as a collapsible element. Accepts an optional options object.
`$().collapse('toggle')`	Toggles a collapsible element to shown or hidden.
`$().collapse('show')`	Shows a collapsible element.
`$().collapse('hide')`	Hides a collapsible element.
`$().collapse('dispose')`	Destroys an element’s collapse.

Events

Bootstrap 4's collapse class exposes a few events for hooking into collapse functionality. See here for more documentation on this.

Event Type	Description
`show.bs.collapse`	This event fires immediately when the show instance method is called.
`shown.bs.collapse`	This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
`hide.bs.collapse`	This event is fired immediately when the hide method has been called.
`hidden.bs.collapse`	This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

Accordion

Bootstrap 4 Accordion with Material Design UI