The <Accordion> and <AccordionItem> components are used together to display a list of content sections that can be toggled open by clicking the respective title of each section.

Example

In ac nisi ut mauris venenatis blandit a et ante. Mauris eu congue velit, eget dictum diam. Etiam sed turpis quis ligula interdum lobortis eu et libero. Praesent nec eros sit amet elit tempor egestas cursus non nulla. Vestibulum dictum luctus lorem in rhoncus.
Nullam vestibulum blandit libero, ac tempus felis tristique id. Aliquam rhoncus vestibulum dui eu dictum. Morbi congue purus eu libero sodales, nec sollicitudin ligula tempor.
- list item
- list item
- list item
Content Section
Content Section

Code

components/Accordion/Accordion.js
<Accordion>
  <AccordionItem title="Title 1">Content Section</AccordionItem>
  <AccordionItem title="Title 2">Content Section</AccordionItem>
  <AccordionItem title="Title 3">Content Section</AccordionItem>
</Accordion>
Copy to clipboard

Props

Accordion

property	propType	required	default	description
children	node			Pass in the children that will be rendered within the Accordion
className	string			Specify an optional className to be applied to the container node

AccordionItem

property	propType	default	description
title	node	‘title’	The accordion title
renderExpando	func	props => <button {…props} />	The callback function to render the expando button. Can be a React component class.
iconDescription	string	‘Expand/Collapse’	The description of the expando icon
open	bool	false	`true` to open the expando
onClick	func	() => {}	The handler of the massaged `click` event.
onHeadingClick	func	() => {}	The handler of the massaged `click` event on the heading.
children	node		Provide the contents of your AccordionItem
className	string		Specify an optional className to be applied to the container node

Edit this page on GitHub

Guides: v3.0 Migration

Components: AnchorLinks