Accordion

The Accordion component is used to expand and collapse the content area by clicking the title. It is often used to display a large amount of content in a limited space.

Import

Main Individual

import { Accordion } from 'rsuite';

Examples

Basic

By default, multiple panels can be expanded. Click the title to expand or collapse the accordion panel area.

Bordered

Expand only one panel

When defaultActiveKey or activeKey is set, only one panel can be expanded.

Controlled

activeKey can be controlled by onSelect callback.

Custom Indicator

Custom Header

React is a JavaScript library for building user interfaces.

Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.

Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.

Learn Once, Write Anywhere: We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be they simple or complex.

Angular is a web framework that empowers developers to build fast, reliable applications. Maintained by a dedicated team at Google, Angular provides a broad suite of tools, APIs, and libraries to simplify and streamline your development workflow. Angular gives you a solid platform on which to build fast, reliable applications that scale with both the size of your team and the size of your codebase.

Disabled Panel

Accessibility

ARIA properties

aria-expanded: Indicates whether the panel is expanded or collapsed.
aria-controls: Identifies the content that is controlled by the panel.
aria-labelledby: Identifies the element that serves as the title for the panel.
aria-disabled: Indicates that the panel is disabled.

Keyboard interactions

Tab: Move focus to the next focusable panel.
Enter or Space: Expand or collapse the panel.

Resources

ARIA Practices: Accordion Pattern

Props

`<Accordion>`

Property	Type `(Default)`	Description
activeKey	string	The active item's event key.
bordered	boolean	Show border.
classPrefix	string	The prefix of the component CSS class.
defaultActiveKey	string	The default active item's event key.
onSelect	(eventKey: string, event) => void	Callback fired when the active item changes.

`<Accordion.Panel>`

Property	Type `(Default)`	Description
bodyFill	boolean	Content area filled with containers.
caretAs	ReactNode	Custom indicator.
classPrefix	string `('panel')`	The prefix of the component CSS class.
defaultExpanded	boolean	Expand the panel by default.
disabled	boolean	Disable the panel.
eventKey	string	The event key corresponding to the panel.
expanded	boolean	Expand the panel.
header	ReactNode	The title of the panel.