# Accordion

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.

#### Collapsible Group Item #1

The word "accordion" typically conjures a mental image of your favorite polka band. However that’s not what we are talking about when referring to accordion menu. Although polka music can offer a rip-snorting good time, the term is associated with something different in the realm of web design. User interface accordions might refer to menus, widgets, or content areas which expand like the musical instrument. These interfaces have grown a lot more popular in recent years with the expansion of JavaScript.

#### Collapsible Group Item #2

Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page. Granted these content displays also require dynamic effects for switching between page elements – so there are pros and cons to accordions.

#### Collapsible Group Item #3

Not every website needs an accordion menu and you certainly won’t find them all the time. But that’s no reason to ignore the concept entirely. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching. Each interface works differently based on the circumstances of the layout.

## Propeller Accordion

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.

#### Collapsible Group Item #1 keyboard_arrow_down

The word "accordion" typically conjures a mental image of your favorite polka band. However that’s not what we are talking about when referring to accordion menu. Although polka music can offer a rip-snorting good time, the term is associated with something different in the realm of web design. User interface accordions might refer to menus, widgets, or content areas which expand like the musical instrument. These interfaces have grown a lot more popular in recent years with the expansion of JavaScript.

#### Collapsible Group Item #2 keyboard_arrow_down

Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page. Granted these content displays also require dynamic effects for switching between page elements – so there are pros and cons to accordions.

#### Collapsible Group Item #3 keyboard_arrow_down

Not every website needs an accordion menu and you certainly won’t find them all the time. But that’s no reason to ignore the concept entirely. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching. Each interface works differently based on the circumstances of the layout.

## 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.

#### Collapsible Group Item #1 keyboard_arrow_down

The word "accordion" typically conjures a mental image of your favorite polka band. However that’s not what we are talking about when referring to accordion menu. Although polka music can offer a rip-snorting good time, the term is associated with something different in the realm of web design. User interface accordions might refer to menus, widgets, or content areas which expand like the musical instrument. These interfaces have grown a lot more popular in recent years with the expansion of JavaScript.

#### Collapsible Group Item #2 keyboard_arrow_down

Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page. Granted these content displays also require dynamic effects for switching between page elements – so there are pros and cons to accordions.

#### Collapsible Group Item #3 keyboard_arrow_down

Not every website needs an accordion menu and you certainly won’t find them all the time. But that’s no reason to ignore the concept entirely. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching. Each interface works differently based on the circumstances of the layout.

## 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.

#### Collapsible Group Item #1 keyboard_arrow_down

The word "accordion" typically conjures a mental image of your favorite polka band. However that’s not what we are talking about when referring to accordion menu. Although polka music can offer a rip-snorting good time, the term is associated with something different in the realm of web design. User interface accordions might refer to menus, widgets, or content areas which expand like the musical instrument. These interfaces have grown a lot more popular in recent years with the expansion of JavaScript.

#### Collapsible Group Item #2 keyboard_arrow_down

Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page. Granted these content displays also require dynamic effects for switching between page elements – so there are pros and cons to accordions.

#### Collapsible Group Item #3 keyboard_arrow_down

Not every website needs an accordion menu and you certainly won’t find them all the time. But that’s no reason to ignore the concept entirely. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching. Each interface works differently based on the circumstances of the layout.

## 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.

#### Expandable Group Item #1 keyboard_arrow_down

The word "accordion" typically conjures a mental image of your favorite polka band. However that’s not what we are talking about when referring to accordion menu. Although polka music can offer a rip-snorting good time, the term is associated with something different in the realm of web design. User interface accordions might refer to menus, widgets, or content areas which expand like the musical instrument. These interfaces have grown a lot more popular in recent years with the expansion of JavaScript.

#### Expandable Group Item #2 keyboard_arrow_down

Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page. Granted these content displays also require dynamic effects for switching between page elements – so there are pros and cons to accordions.

#### Expandable Group Item #3 keyboard_arrow_down

Not every website needs an accordion menu and you certainly won’t find them all the time. But that’s no reason to ignore the concept entirely. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching. Each interface works differently based on the circumstances of the layout.

## 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.

#### mood Collapsible Group Item #1 keyboard_arrow_down

The word "accordion" typically conjures a mental image of your favorite polka band. However that’s not what we are talking about when referring to accordion menu. Although polka music can offer a rip-snorting good time, the term is associated with something different in the realm of web design. User interface accordions might refer to menus, widgets, or content areas which expand like the musical instrument. These interfaces have grown a lot more popular in recent years with the expansion of JavaScript.

#### account_balance Collapsible Group Item #2 keyboard_arrow_down

Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page. Granted these content displays also require dynamic effects for switching between page elements – so there are pros and cons to accordions.

#### verified_user Collapsible Group Item #3 keyboard_arrow_down

Not every website needs an accordion menu and you certainly won’t find them all the time. But that’s no reason to ignore the concept entirely. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching. Each interface works differently based on the circumstances of the layout.

## Accordion with colored icon

You can also create an accordian with colored icons. Add `.panel-warning`, `.panel-danger`, `.panel-success`, `.panel-info` to your panel div.

#### mood Collapsible Group Item #1

The word "accordion" typically conjures a mental image of your favorite polka band. However that’s not what we are talking about when referring to accordion menu. Although polka music can offer a rip-snorting good time, the term is associated with something different in the realm of web design. User interface accordions might refer to menus, widgets, or content areas which expand like the musical instrument. These interfaces have grown a lot more popular in recent years with the expansion of JavaScript.

#### account_balance Collapsible Group Item #2

Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page. Granted these content displays also require dynamic effects for switching between page elements – so there are pros and cons to accordions.

#### verified_user Collapsible Group Item #3

Not every website needs an accordion menu and you certainly won’t find them all the time. But that’s no reason to ignore the concept entirely. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching. Each interface works differently based on the circumstances of the layout.

#### account_box Collapsible Group Item #4

So when exactly should you use accordions? Mostly with larger menus or content which might behave cleaner using expandable sections. These could be sub-headings or even multiple levels – the point is to organize content in a way that makes navigation simpler than endless scrolling.

## Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the accordion. Apart from the Bootstrap 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

## Events

Bootstrap'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).