menu
Menu
Mobify DevCenter
search_icon_focus

Accordion

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.

Related component: AccordionItem.

JavaScript import

import {Accordion, AccordionItem} from 'progressive-web-sdk/dist/components/accordion'

SCSS import

@import 'node_modules/progressive-web-sdk/dist/components/accordion/base';

Props table

Name & DescriptionTypeDefault
children
This list of AccordionItems you'd like to display.
nodenone
className
Adds values to the class attribute of the root element.
stringnone
duration
Duration of the animation in millis.
number500
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.

stringnone
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
boolnone
singleItemOpen
When set to true will force only one item open at a time.
boolfalse
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

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark

Lifecycle callbacks

If these functions are provided directly to AccordionItem, they will override the ones passed to the Accordion.

CallbackExplanation
onOpenTriggered by the user clicking on the header (AccordionItem). The onOpen function is called with the item’s ID passed to it.
onOpenedTriggered after the accordion is done opening.
onCloseTriggered by the user clicking on the opened header (AccordionItem). The onClose function is called with the item’s ID passed to it.
onClosedTriggered after the accordion is done closing.
amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark

Different icons

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark

Open/close animation

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark