@teste-ui/accordion

An accordion is a vertically stacked set of interactive headings that each contain a title or content snippet representing a section of content.

The headings function as controls that enable users to reveal or hide their associated sections of content.

Installation

1yarn add @teste-ui/accordion
2
3# or
4
5npm i @teste-ui/accordion

Import Components

1import {

2  Accordion,

3  AccordionItem,

4  AccordionButton,

5  AccordionPanel,
6} from "@teste-ui/accordion"

Component:

• Accordion: manages the global state of all opened accordion items via context.
• AccordionItem: manages the state for a single accordion item.
• AccordionButton: the trigger to open/close an accordion item.
• AccordionPanel: the main content area for the accordion item.

Usage

By default, only one accordion can be visible at a time, and it can't be toggled.

Note 🚨: Each accordion button must be wrapped in a heading tag, that is appropriate for the information architecture of the page.

1<Accordion>
2  <AccordionItem>
3    <h2>
4      <AccordionButton>Section 1 title</AccordionButton>
5    </h2>
6    <AccordionPanel>Panel 1</AccordionPanel>
7  </AccordionItem>
8
9  <AccordionItem>
10    <h2>
11      <AccordionButton>Section 2 title</AccordionButton>
12    </h2>
13    <AccordionPanel>Panel 2</AccordionPanel>
14  </AccordionItem>
15</Accordion>

To make each accordion toggle (expand/collapse) on click, pass the allowToggle prop.

1<Accordion allowToggle>
2  <AccordionItem>
3    <AccordionButton>
4      <chakra.div flex="1" textAlign="left">
5        Section 1 title
6      </chakra.div>
7      <AccordionIcon />
8    </AccordionButton>
9    <AccordionPanel pb={4}>Panel 1</AccordionPanel>
10  </AccordionItem>
11
12  <AccordionItem>
13    <AccordionButton>
14      <chakra.div flex="1" textAlign="left">
15        Section 2 title
16      </chakra.div>
17      <AccordionIcon />
18    </AccordionButton>
19    <AccordionPanel pb={4}>Panel 2</AccordionPanel>
20  </AccordionItem>
21</Accordion>

To allow multiple accordions to be visible at a time, pass the allowMultiple prop.

1<Accordion allowMultiple>
2  <AccordionItem>
3    <AccordionButton>
4      <chakra.div flex="1" textAlign="left">
5        Section 1 title
6      </chakra.div>
7      <AccordionIcon />
8    </AccordionButton>
9    <AccordionPanel pb={4}>Panel 1</AccordionPanel>
10  </AccordionItem>
11
12  <AccordionItem>
13    <AccordionButton>
14      <chakra.div flex="1" textAlign="left">
15        Section 2 title
16      </chakra.div>
17      <AccordionIcon />
18    </AccordionButton>
19    <AccordionPanel pb={4}>Panel 2</AccordionPanel>
20  </AccordionItem>
21</Accordion>

References:

https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html https://inclusive-components.design/collapsible-sections/ https://github.com/stereobooster/react-accessible-accordion https://jqueryui.com/accordion/