Accordion

Accordions display an expandable/collapsible list of items. The final Accordion component is a compound of the following:

• Accordion: wraps a series of AccordionItems in a single component.

  • AccordionItem: wraps an AccordionButton and an AccordionPanel.

    • AccordionButton: contains the top-level items of the Accordion list. It is a clickable button that shows or hides the child items of a given AccordionItem.

    • AccordionPanel: contains the child items of a given AccordionItem.

Import

import { Accordion, AccordionItem, AccordionButton, AccordionPanel } from '@faststore/ui'

Usage

Multiple and collapsible

Loading...

Toggle with icon

Loading...

Props

All accordion-related components support all attributes also supported by the <div> tag, except for the AccordionButton, which renders the <button> tag.

Besides those attributes, the following props are also supported:

Accordion

AccordionItem

AccordionPanel

Customization

data-fs-accordion

data-accordion-item

data-accordion-button

data-accordion-panel

The AccordionButton component inherits Button css selectors.