Accordion

The Accordion component provides a collapsible container for hiding and revealing content. It improves content organization, especially when working with long sections or grouped data.

It consists of 3 components

• Accordion
• AccordionHeader
• AccordionDescription

Usage

import { Accordion, AccordionHeader, AccordionDescription } from "@asphalt-react/accordion"

 <Accordion>
    <AccordionHeader>Title</AccordionHeader>
    <AccordionDescription>Description</AccordionDescription>
 </Accordion>

Behaviour

Accordion supports two behaviors: multiple sections can be open at once (default), or only a single section can remain open at a time. To enable single-open mode, set the same name prop to each component in the group.

 <Accordion name="accordion">
    <AccordionHeader>Title</AccordionHeader>
    <AccordionDescription>Description</AccordionDescription>
 </Accordion>

 <Accordion name="accordion">
    <AccordionHeader>Title</AccordionHeader>
    <AccordionDescription>Description</AccordionDescription>
 </Accordion>

Group Variant

Use the stickTop and stickBottom props to connect accordions visually in a group without spacing between them.

<Accordion stickBottom>
  <AccordionHeader>First Section</AccordionHeader>
  <AccordionDescription>First section content</AccordionDescription>
</Accordion>

<Accordion stickTop stickBottom>
  <AccordionHeader>Middle Section</AccordionHeader>
  <AccordionDescription>Middle section content</AccordionDescription>
</Accordion>

<Accordion stickTop>
  <AccordionHeader>Last Section</AccordionHeader>
  <AccordionDescription>Last section content</AccordionDescription>
</Accordion>

Keyboard Interaction

• Use Tab to move focus to the Accordion Header.
• Use Enter or Space to toggle the panel open or close.

Props

children

Container for the header and description content.

| type | required | default | | ---- | -------- | ------- | | node | false | null |

name

Enables single-select behavior. Use the same name for all accordions to allow only one to stay open at a time.

| type | required | default | | ------ | -------- | ------- | | string | false | N/A |

open

Determines if the accordion is open by default.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

stickTop

Remove border-radius on top corners. Use this prop only with group variant.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

stickBottom

Remove border-radius on bottom corners. Use this prop only with group variant.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

onToggle

Callback when the accordion toggles. Use this to perform side effects such as analytics.

It receives the React synthetic event as the argument.

(event) => {}

| type | required | default | | ---- | -------- | ------- | | func | false | N/A |

AccordionHeader

Props

children

Content for the header.

| type | required | default | | ---- | -------- | ------- | | node | false | null |

iconStart

Display the icon at the start of the content.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

AccordionDescription

Props

children

Content for description.

| type | required | default | | ---- | -------- | ------- | | node | false | null |