An accordion is a vertically stacked group of collapsible sections. An accordion is composed of grouped buttons and panels. When a user clicks an accordion button, its respective panel will hide or show.
Basic Usage
An accordion is made up of four components: Accordion, AccordionItem, AccordionButton and AccordionPanel. The Accordion is the wrapper for all of the items. It can contain one or more AccordionItems, each of which should contain one AccordionButton and one AccordionPanel. An AccordionButton can be wrapped in an element with the role of heading (such as an h1-h6) to provide semantic structure to the document.
By default, multiple items will can be expanded. The defaultIndex prop, which takes an array of zero-based indices, can be used to set panels open by default.
import React from 'react';import {Accordion,AccordionItem,AccordionButton,AccordionPanel,} from 'react-magma-dom';export function Example() {return (<Accordion defaultIndex={[0]}><AccordionItem><h3><AccordionButton>Section 1</AccordionButton></h3><AccordionPanel>Content for section one lorem ipsum</AccordionPanel></AccordionItem><AccordionItem><h3><AccordionButton>Section 2</AccordionButton></h3><AccordionPanel>Content for section two lorem ipsum</AccordionPanel></AccordionItem><AccordionItem><h3><AccordionButton>Section 3</AccordionButton></h3><AccordionPanel>Content for section three lorem ipsum</AccordionPanel></AccordionItem></Accordion>);}
Restrict Multiple Expanded
By default, the isMulti true, which means that the accordion will allow multiple items to be expanded at once. If you wish to limit the number of items open to one, you can set the isMulti prop to false.
When the isMulti prop is false, the defaultIndex prop will take a single number, instead of an array.
import React from 'react';import {Accordion,AccordionItem,AccordionButton,AccordionPanel,} from 'react-magma-dom';export function Example() {return (<Accordion isMulti={false} defaultIndex={0}><AccordionItem><h3><AccordionButton>Section 1</AccordionButton></h3><AccordionPanel>Content for section one lorem ipsum</AccordionPanel></AccordionItem><AccordionItem><h3><AccordionButton>Section 2</AccordionButton></h3><AccordionPanel>Content for section two lorem ipsum</AccordionPanel></AccordionItem><AccordionItem><h3><AccordionButton>Section 3</AccordionButton></h3><AccordionPanel>Content for section three lorem ipsum</AccordionPanel></AccordionItem></Accordion>);}
Controlled Accordion
If you would like to control which panels are open directly, you can use the index prop to set the open panels. You will also need to set that prop directly with the onExpandedChange event, which fires when you toggle one of the accordion buttons.
If isMulti is true, then the index prop must be an array.
import React from 'react';import {Accordion,AccordionItem,AccordionButton,AccordionPanel,Button,ButtonSize,ButtonVariant,ButtonGroup,Spacer,} from 'react-magma-dom';export function Example() {const [expandedIndex, setExpandedIndex] = React.useState([]);const isAllExpanded = expandedIndex.length > 0;const handleToggleAll = () => {if (isAllExpanded) {setExpandedIndex([]);} else {setExpandedIndex([0, 1, 2]);}};const handleExpandedChange = index => {if (expandedIndex.includes(index)) {setExpandedIndex(expandedIndex.filter(item => item !== index));} else {setExpandedIndex(expandedIndex.concat([index]));}};return (<><ButtonGroup><ButtononClick={handleToggleAll}size={ButtonSize.small}variant={ButtonVariant.solid}>{isAllExpanded ? 'Collapse All' : 'Expand All'}</Button></ButtonGroup><Spacer size="12" /><Accordion index={expandedIndex} onExpandedChange={handleExpandedChange}><AccordionItem><AccordionButton>Section 1</AccordionButton><AccordionPanel>Content for section one lorem ipsum</AccordionPanel></AccordionItem><AccordionItem><AccordionButton>Section 2</AccordionButton><AccordionPanel>Content for section two lorem ipsum</AccordionPanel></AccordionItem><AccordionItem><AccordionButton>Section 3</AccordionButton><AccordionPanel>Content for section two lorem ipsum</AccordionPanel></AccordionItem></Accordion></>);}
Icon Position
By default, a chevron icon appears on the right of each AccordionItem. You may change the position to the left, or remove it by using the iconPosition prop, which accepts the values AccordionIconPosition.left, AccordionIconPosition.none, or AccordionIconPosition.right.
import React from 'react';import {Accordion,AccordionItem,AccordionButton,AccordionPanel,AccordionIconPosition,} from 'react-magma-dom';export function Example() {return (<Accordion iconPosition={AccordionIconPosition.left}><AccordionItem><AccordionButton>Section 1</AccordionButton><AccordionPanel>Content for section one lorem ipsum</AccordionPanel></AccordionItem><AccordionItem><AccordionButton>Section 2</AccordionButton><AccordionPanel>Content for section two lorem ipsum</AccordionPanel></AccordionItem></Accordion>);}
Disabled Item
You can disable a single item by adding the isDisabled prop to the AccordionItem component.
import React from 'react';import {Accordion,AccordionItem,AccordionButton,AccordionPanel,} from 'react-magma-dom';export function Example() {return (<Accordion><AccordionItem><AccordionButton>Section 1</AccordionButton><AccordionPanel>Content for section one lorem ipsum</AccordionPanel></AccordionItem><AccordionItem><AccordionButton>Section 2</AccordionButton><AccordionPanel>Content for section two lorem ipsum</AccordionPanel></AccordionItem><AccordionItem isDisabled><AccordionButton>Section 3</AccordionButton><AccordionPanel>Content for section three lorem ipsum</AccordionPanel></AccordionItem></Accordion>);}
Inverse
The isInverse prop will render light text, to be used on a dark background. The children will
inherit the isInverse prop unless specified otherwise.
import React from 'react';import {Accordion,AccordionItem,AccordionButton,AccordionPanel,Card,CardBody,} from 'react-magma-dom';export function Example() {return (<Card isInverse><CardBody><Accordion isInverse><AccordionItem><AccordionButton>Section 1</AccordionButton><AccordionPanel>Content for section one lorem ipsum</AccordionPanel></AccordionItem><AccordionItem><AccordionButton>Section 2</AccordionButton><AccordionPanel>Content for section two lorem ipsum</AccordionPanel></AccordionItem></Accordion></CardBody></Card>);}
Accordion Props
Any other props supplied will be provided to the wrapping div element.
Single Controlled
defaultIndex
Description
Not used in controlled accordion
Type
never
Default
-
iconPosition
Description
Position of the chevron icon. If 'none', the icon will not render at all.
Type
enum, one of:
AccordionIconPosition.left
AccordionIconPosition.none
AccordionIconPosition.right
Default
AccordionIconPosition.right
index
Description
Zero-based index of expanded item. When isMulti is a false this is a number.
Type
number
Default
null
isInverse
Description
If true, the component will have inverse styling to better appear on a dark background
Type
boolean
Default
false
isMulti
Type
false
Default
-
onExpandedChange
Description
Event that fires when an accordion button is clicked
Type
function
Default
-
Multiple Controlled
defaultIndex
Description
Not used in controlled accordion
Type
never
Default
-
iconPosition
Description
Position of the chevron icon. If 'none', the icon will not render at all.
Type
enum, one of:
AccordionIconPosition.left
AccordionIconPosition.none
AccordionIconPosition.right
Default
AccordionIconPosition.right
index
Description
Zero-based indices of expanded items. When isMulti is true this is an array of numbers.
Type
number[]
Default
[]
isInverse
Description
If true, the component will have inverse styling to better appear on a dark background
Type
boolean
Default
false
isMulti
Type
true
Default
-
onExpandedChange
Description
Event that fires when an accordion button is clicked
Type
function
Default
-
Single Not Controlled
defaultIndex
Description
Zero-based index of item to expanded initially. When isMulti is false this is a number.
Type
number
Default
null
iconPosition
Description
Position of the chevron icon. If 'none', the icon will not render at all.
Type
enum, one of:
AccordionIconPosition.left
AccordionIconPosition.none
AccordionIconPosition.right
Default
AccordionIconPosition.right
index
Description
Not used in uncontrolled accordion
Type
never
Default
-
isInverse
Description
If true, the component will have inverse styling to better appear on a dark background
Type
boolean
Default
false
isMulti
Description
If true, multiple accordion items may be expanded at once
Type
false
Default
-
onExpandedChange
Description
Event that fires when an accordion button is clicked
Type
function
Default
-
Multiple Not Controlled
defaultIndex
Description
Zero-based indices of item to expanded initially. When isMulti is true this is an array of numbers.
Type
number[]
Default
[]
iconPosition
Description
Position of the chevron icon. If 'none', the icon will not render at all.
Type
enum, one of:
AccordionIconPosition.left
AccordionIconPosition.none
AccordionIconPosition.right
Default
AccordionIconPosition.right
index
Description
Not used in uncontrolled accordion
Type
never
Default
-
isInverse
Description
If true, the component will have inverse styling to better appear on a dark background
Type
boolean
Default
false
isMulti
Description
If true, multiple accordion items may be expanded at once
Type
true
Default
-
onExpandedChange
Description
Event that fires when an accordion button is clicked
Type
function
Default
-
AccordionItem Props
Any other props supplied will be provided to the wrapping div element.
children
Description
The content of the component
Type
ReactNode | undefined
Default
-
isDisabled
Type
boolean
Default
-
AccordionButton Props
Any other props supplied will be provided to the wrapping button element.
children
Description
The content of the component
Type
ReactNode | undefined
Default
-
isInverse
Description
If true, the component will have inverse styling to better appear on a dark background
Type
boolean
Default
false
AccordionPanel Props
Any other props supplied will be provided to the wrapping div element.
children
Description
The content of the component
Type
ReactNode | undefined
Default
-
isInverse
Description
If true, the component will have inverse styling to better appear on a dark background
Type
boolean
Default
false
testId
Type
string
Default
-
On this page