Skip to main content

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.