Demos
Single Accordion
Accordion title
<Accordionexpandedremember_stateid="single-accordion"title="Accordion title"><P>Accordion content</P></Accordion><Accordion.Providertopremember_stateicon="chevron_down"icon_position="right"><Accordionid="single-provider-accordion"title="Accordion title"><P>Accordion content</P></Accordion></Accordion.Provider>
Accordion with large title and content
Grouped Accordion
NB: Please have a read on the unexpected behavior thoughts.
Accordion title
<Accordion.Group expanded allow_close_all><Accordion expanded={false}><Accordion.Header>Accordion title</Accordion.Header><Accordion.Content top="x-large"><P>Sociis sapien sociosqu vel sollicitudin accumsan laoreetgravida himenaeos nostra mollis volutpat bibendum convalliscum condimentum dictumst blandit rutrum vehicula</P></Accordion.Content></Accordion><Accordion top><Accordion.Header>Accordion title</Accordion.Header><Accordion.Content><P>Nec sit mattis natoque interdum sagittis cubilia nibhnullam etiam</P></Accordion.Content></Accordion></Accordion.Group>
Customized Accordion
Accordion title
<Accordiongroup="unique-id"left_component={<IconPrimary icon="bell" />}><Accordion.Header>Accordion title</Accordion.Header><Accordion.Content><P>Sociis sapien sociosqu vel sollicitudin accumsan laoreetgravida himenaeos nostra mollis volutpat bibendum convalliscum condimentum dictumst blandit rutrum vehicula</P></Accordion.Content></Accordion><Accordion top expanded={true} group="unique-id"><Accordion.Header>Accordion title</Accordion.Header><Accordion.Content><P>Nec sit mattis natoque interdum sagittis cubilia nibh nullametiam</P></Accordion.Content></Accordion>
Nested Accordions
<Accordionid="nested-accordion"title="Accordion"expandedspace><P space={0}>Content A</P><Accordionid="nested-accordion-1"title="Accordion nested 1"space><P space={0}>I'm nested 1</P></Accordion><P space={0}>Content B</P><Accordionid="nested-accordion-2"title="Accordion nested 2"space><P space={0}>I'm nested 2</P></Accordion></Accordion>
Accordion with a single container
A single container is only used for wider screens (desktop). When the users' screen is narrower (mobile), it will change to a normal accordion. The change happens with CSS only, so it will not interrupt any React render.
Accordion title