Demos

Single Accordion

Accordion title

Accordion content

<Accordion
expanded
remember_state
id="single-accordion"
title="Accordion title"
>
<P>Accordion content</P>
</Accordion>
<Accordion.Provider
top
remember_state
icon="bell"
icon_position="right"
>
<Accordion
id="single-provider-accordion"
title="Accordion title"
>
<P>Accordion content</P>
</Accordion>
</Accordion.Provider>

Accordion with large title and content

Large content with long titleScelerisque eget cubilia tempus ipsum aenean dolor suscipit egestas potenti at eleifend platea interdum magnis amet molestie sem faucibus netus

Hendrerit dictum elit facilisis aliquet eleifend potenti leo nec praesent sollicitudin elementum scelerisque ridiculus neque nisi risus et habitant torquent nam pellentesque dictumst porttitor accumsan a nibh fringilla facilisi lacus sagittis mauris libero tellus justo ultricies tempor viverra sodales vestibulum proin tempus lorem cubilia at velit sociis sit malesuada class consectetur turpis metus vulputate tortor cum nisl ornare ligula platea quam gravida sapien penatibus ad curae varius hac ultrices ipsum felis vehicula fermentum rutrum parturient congue sed vel magnis laoreet donec id consequat augue mi semper volutpat urna in condimentum luctus cursus fames dignissim magna suspendisse bibendum mus natoque diam

Grouped Accordion

NB: Please have a read on the unexpected behavior thoughts.

Accordion title

Nec sit mattis natoque interdum sagittis cubilia nibh nullam etiam

<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 laoreet
gravida himenaeos nostra mollis volutpat bibendum convallis
cum 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 nibh
nullam etiam
</P>
</Accordion.Content>
</Accordion>
</Accordion.Group>

Customized Accordion

Accordion title

Nec sit mattis natoque interdum sagittis cubilia nibh nullam etiam

<Accordion
group="unique-id"
left_component={<IconPrimary icon="bell" />}
>
<Accordion.Header>Accordion title</Accordion.Header>
<Accordion.Content>
<P>
Sociis sapien sociosqu vel sollicitudin accumsan laoreet
gravida himenaeos nostra mollis volutpat bibendum convallis
cum 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 nullam
etiam
</P>
</Accordion.Content>
</Accordion>

Nested Accordions

Accordion

Content A

Content B

<Accordion
id="nested-accordion"
title="Accordion"
expanded
space
>
<P space={0}>Content A</P>
<Accordion
id="nested-accordion-1"
title="Accordion nested 1"
space
>
<P space={0}>I'm nested 1</P>
</Accordion>
<P space={0}>Content B</P>
<Accordion
id="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.

Title 3Description 3