2.3.1 • Published 8 months ago

@chakra-ui/accordion v2.3.1

Weekly downloads
61,558
License
MIT
Repository
github
Last release
8 months ago

@chakra-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

yarn add @chakra-ui/accordion

# or

npm i @chakra-ui/accordion

Import Components

import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
} from "@chakra-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.

<Accordion>
  <AccordionItem>
    <h2>
      <AccordionButton>Section 1 title</AccordionButton>
    </h2>
    <AccordionPanel>Panel 1</AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <h2>
      <AccordionButton>Section 2 title</AccordionButton>
    </h2>
    <AccordionPanel>Panel 2</AccordionPanel>
  </AccordionItem>
</Accordion>

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

<Accordion allowToggle>
  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 1 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 1</AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 2 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 2</AccordionPanel>
  </AccordionItem>
</Accordion>

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

<Accordion allowMultiple>
  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 1 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 1</AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 2 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 2</AccordionPanel>
  </AccordionItem>
</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/

2.3.0

10 months ago

2.3.1

8 months ago

2.2.0

11 months ago

2.1.10

1 year ago

2.1.11

1 year ago

2.1.9

1 year ago

2.1.6

1 year ago

2.1.8

1 year ago

2.1.7

1 year ago

2.1.2

2 years ago

2.1.1

2 years ago

2.1.4

1 year ago

2.1.3

1 year ago

2.1.5

1 year ago

1.4.12

2 years ago

2.0.11

2 years ago

2.0.12

2 years ago

2.1.0

2 years ago

2.0.10

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.9

2 years ago

2.0.8

2 years ago

2.0.0-next.2

2 years ago

2.0.0-next.3

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.4.11

2 years ago

1.4.10

2 years ago

2.0.0-next.0

2 years ago

2.0.0-next.1

2 years ago

1.4.9

2 years ago

1.4.6

2 years ago

1.4.5

2 years ago

1.4.4

2 years ago

1.4.3

2 years ago

1.4.2

2 years ago

1.4.8

2 years ago

1.4.7

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.3.10

2 years ago

1.3.7

3 years ago

1.3.8

3 years ago

1.3.6

3 years ago

1.3.5-next.1

3 years ago

1.3.5

3 years ago

1.3.4

3 years ago

1.3.3

3 years ago

1.3.2

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.0

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

1.0.0-rc.8

4 years ago

1.0.0-rc.7

4 years ago

1.0.0-rc.6

4 years ago

1.0.0-rc.5

4 years ago

1.0.0-rc.4

4 years ago

1.0.0-rc.3

4 years ago

1.0.0-rc.2

4 years ago

1.0.0-rc.1

4 years ago

1.0.0-next.7

4 years ago

1.0.0-rc.0

4 years ago

1.0.0-next.5

4 years ago

1.0.0-next.6

4 years ago

1.0.0-next.4

4 years ago

1.0.0-next.3

4 years ago

1.0.0-next.2

4 years ago

1.0.0-next.1

4 years ago

1.0.0-next.2251

4 years ago

1.0.0-next.0

4 years ago