# @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 ```sh yarn add @chakra-ui/accordion # or npm i @chakra-ui/accordion ``` ## Import Components ```jsx 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. ```jsx

Section 1 title

Panel 1

Section 2 title

Panel 2 ``` To make each accordion toggle (expand/collapse) on click, pass the `allowToggle` prop. ```jsx Section 1 title Panel 1 Section 2 title Panel 2 ``` To allow multiple accordions to be visible at a time, pass the `allowMultiple` prop. ```jsx Section 1 title Panel 1 Section 2 title Panel 2 ``` ## 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/

패키지	다운로드	Stars	크기	Issues	발행일	라이선스

@chakra-ui/accordion	437,281	39,116	240 kB	7	2年前	MIT