Accordions are used to break up long and complex content into digestable sections that can be viewed at a glance. They are commonly used in sidebar navigation, forms, and FAQ pages.
The Accordion component is a wrapper that contains AccordionItem components.
This list of AccordionItems you'd like to display.
node
none
className
Adds values to the class attribute of the root element.
string
none
duration
Duration of the animation in millis.
number
500
easing
Easing function for the animation.
string
'ease'
id
Component ID, component will use child id, if not provided then will be
generated by HOC, withUniqueId.
string
none
initialOpenItems
If an item should be open by default, include its id in this array.
In order to support the old version where this prop accepted indices,
all items in this array will be converted into strings.
array
[]
prerender
Determines whether the content is available in DOM before opening the accordion
bool
none
singleItemOpen
When set to true will force only one item open at a time.
bool
false
onClose
Triggered every time an accordion item is starting to close.
This function is passed the id of the accordion item which is closing.
This prop can also be passed to an AccordionItem.
func
() => undefined
onClosed
Triggered every time an accordion item is finished closing.
This function is passed the id of the accordion item which closed.
This prop can also be passed to an AccordionItem.
func
() => undefined
onOpen
Triggered every time an accordion item is starting to open.
This function is passed the id of the accordion item which is opening.
This prop can also be passed to an AccordionItem.
func
() => undefined
onOpened
Triggered every time an accordion item has finished opening.
This function is passed the id of the accordion item which opened.
This prop can also be passed to an AccordionItem.
func
() => undefined
Basic example
<Accordion>
<AccordionItemheader="Accordion Item #1"id="1">
<div>Contrary to popular belief, Lorem Ipsum is not simply random text.</div>
</AccordionItem>
</Accordion>
Lifecycle callbacks
If these functions are provided directly to AccordionItem, they will override the ones passed to the Accordion.
Callback
Explanation
onOpen
Triggered by the user clicking on the header (AccordionItem). The onOpen function is called with the item’s ID passed to it.
onOpened
Triggered after the accordion is done opening.
onClose
Triggered by the user clicking on the opened header (AccordionItem). The onClose function is called with the item’s ID passed to it.
onClosed
Triggered after the accordion is done closing.
<Accordion
onOpen={()=>{
alert('Accordion is opening')
}}
onOpened={()=>{
alert('Accordion is open')
}}
onClose={()=>{
alert('Accordion is closing')
}}
onClosed={()=>{
alert('Accordion is closed')
}}
>
<AccordionItemheader="Accordion Item"id="1">
<div>Contrary to popular belief, Lorem Ipsum is not simply random text.</div>
</AccordionItem>
</Accordion>
Different icons
<Accordion>
<AccordionItem
header="Accordion Item #1"
openIconName="caret-bottom"
closeIconName="caret-top"
iconPosition="end"
id="1"
>
<div>Contrary to popular belief, Lorem Ipsum is not simply random text.</div>
</AccordionItem>
<AccordionItem
header="Accordion Item #2"
openIconName="caret-bottom"
closeIconName="caret-top"
iconPosition="end"
id="2"
>
<div>Contrary to popular belief, Lorem Ipsum is not simply random text.</div>
</AccordionItem>
</Accordion>
Open/close animation
<Accordionduration={150}easing="ease-out">
<AccordionItem
header="Accordion Item #1"
openIconName="caret-bottom"
closeIconName="caret-top"
iconPosition="end"
id="1"
>
<div>Contrary to popular belief, Lorem Ipsum is not simply random text.</div>
</AccordionItem>
<AccordionItem
header="Accordion Item #2"
openIconName="caret-bottom"
closeIconName="caret-top"
iconPosition="end"
id="2"
>
<div>Contrary to popular belief, Lorem Ipsum is not simply random text.</div>
</AccordionItem>
</Accordion>
Screenshot
Potential Uses
Nesting non-essential information
Collapsing large and complex pages into digestible sections
Filters with many grouped options
Navigation paradigms
Long forms that are clearly sectioned
Accessibility
Do not rely on color alone to show the difference between open and closed states. Instead, use a different icon, or animate the icon to show the change.
Ensure the contrast between your background color and text passes a11y guides. Use this handy tool.
Best practices
On touch, the Accordion heading/container should show visual feedback.
On touch, the Accordion should also visually change state into an open state.
On second touch, the Accordion should change back into a closed / initial state.
Use a + and x icon for closed and open states respectively. Read more.
Each accordion header should contain an icon on the left. When tapped, the icon will open an area below it which contains the expanded content.
Expanding the accordion should not push the accordion label to the top of the viewport. Vertical positioning should be maintained to avoid disorientation.
Expanding the accordion does push down the page.
Common visual affordances for the Accordion include encapsulation and heavy rules.