Mobify DevCenter

DocumentationAPI & SDK ReferenceHow-To GuidesMobify University

Accordion

Accordion is the outer wrapper of expandable content. It is used to expand and collapse the content by clicking its header.

Prop NameTypeIs RequiredDefault ValueDescription
childrennodeoptionalnoneThis list of `AccordionItems` you'd like to display.
classNamestringoptionalnoneAdds values to the `class` attribute of the root element.
durationnumberoptional500Duration of the animation in millis.
easingstringoptional'ease'Easing function for the animation.
idarrayoptionalnoneComponent ID, component will use child id, if not provided then will be generated by HOC, `withUniqueId`.
initialOpenItemsarrayoptional[]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.
prerenderbooloptionalnoneDetermines whether the content is available in DOM before opening the accordion
singleItemOpenbooloptionalfalseWhen set to true will force only one item open at a time.
onClosefuncoptionalnoopTriggered 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.
onClosedfuncoptionalnoopTriggered 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.
onOpenfuncoptionalnoopTriggered 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.
onOpenedfuncoptionalnoopTriggered 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.

Example usage

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