The latest mockup for the accordion is here:

An accordion is a container for a collapsing block of text.  

An accordion usually has a header.

An accordion can have any number of items.

Default Number of Items

By default the accordion can have any number of items from 0 to 15.  If a default is set,  then it will build out each of the default items for each page.  Typically the default should be 0 unless there is a default accordion item that should appear on every page.

Accordion Animation

An accordion can have an animation which defines the transition of state within the accordion

Content Body Height

Each body can have a fixed height.  If the content within the accordion has too much content, then that accordion body will have a scroll.  Likewise if it is shorter than the set height, blank space will be provided.  Set to auto will automatically adjust the accordion appropriately.

Header Event

<@dharmendar @okereke> the design says click, are there things besides click?

Default Active

<@dharmendar @okereke> what does this mean?  Does this mean which is expanded?  Could this be expanded Items (all, none, or one of the items?)

Accordion Item

Each accordion item has an ID, header, body, order, and state.

Accordion Item ID

The accordion Item has an ID that can be used as an event key.


The header is all that is displayed if the accordion item is collapsed.  It is just plain text.

Body Definition

The accordion body is its own dom tree.  

When configuring the Accordion, you can configure any type of ui objects to be in the dom tree as the body or panel definition.

When using the editor each item you add to the Accordion will add a tree/body or panel as defined for that accordion.


When displaying the accordion the accordion items will be displayed in the order as indicated.


Each accordion item has its own state.

Collapsed State

By default when creating a new accordion it will appear in a collapsed state meaning that none of its children are expanded or open. No default active key is set. If a default active key is set, then by default that item will be expanded when the accordion first appears in view.