React Accessible Accordion
React Component for creating an 'Accordion' that adheres to the WAI ARIA spec for accessibility.
Default behaviour
By default, only one item may be expanded and it can only be collapsed again by expanding another.
What harsh truths do you prefer to ignore?
In pariatur
excepteur ut do aliquip qui mollit aliqua exercitation
excepteur consequat reprehenderit nostrud laborum voluptate veniam non dolore dolore aliqua incididunt amet nisi minim cillum elit.
Is free will real or just an illusion?
Dolor esse proident nisi minim nisi aute nulla sed proident magna id eiusmod consectetur laborum aliqua minim
excepteur sunt anim anim esse aliquip et ea enim proident veniam veniam quis adipisicing nulla amet id commodo.
Is there a meaning to life? If so, what is it?
Consectetur pariatur proident irure proident ea laboris ut do do quis consequat sed officia dolore consequat ut deserunt ea sit sit culpa.
Is the meaning of life the same for animals and humans?
Ex culpa eu veniam ea quis velit exercitation reprehenderit reprehenderit dolore pariatur incididunt occaecat ut irure ut sed dolor veniam sint incididunt esse duis duis dolore sunt aute incididunt amet quis.
Where is the line between art and not art?
Id aute tempor ad sunt et exercitation nulla duis dolore irure elit consectetur laborum reprehenderit veniam nostrud in duis ut duis ullamco dolore do adipisicing sed proident nostrud aute ut ea cupidatat exercitation sit elit.
import {
Accordion,
AccordionItem,
AccordionItemButton,
AccordionItemHeading,
AccordionItemPanel,
} from 'react-accessible-accordion';
<Accordion>
{items.map((item) => (
<AccordionItem key={item.uuid}>
<AccordionItemHeading>
<AccordionItemButton>
{item.heading}
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
{item.content}
</AccordionItemPanel>
</AccordionItem>
))}
</Accordion>
Expanding multiple items at once
If you set allowMultipleExpanded to true then the accordion will permit multiple items to be expanded at once.
What harsh truths do you prefer to ignore?
In pariatur
excepteur ut do aliquip qui mollit aliqua exercitation
excepteur consequat reprehenderit nostrud laborum voluptate veniam non dolore dolore aliqua incididunt amet nisi minim cillum elit.
Is free will real or just an illusion?
Dolor esse proident nisi minim nisi aute nulla sed proident magna id eiusmod consectetur laborum aliqua minim
excepteur sunt anim anim esse aliquip et ea enim proident veniam veniam quis adipisicing nulla amet id commodo.
Is there a meaning to life? If so, what is it?
Consectetur pariatur proident irure proident ea laboris ut do do quis consequat sed officia dolore consequat ut deserunt ea sit sit culpa.
Is the meaning of life the same for animals and humans?
Ex culpa eu veniam ea quis velit exercitation reprehenderit reprehenderit dolore pariatur incididunt occaecat ut irure ut sed dolor veniam sint incididunt esse duis duis dolore sunt aute incididunt amet quis.
Where is the line between art and not art?
Id aute tempor ad sunt et exercitation nulla duis dolore irure elit consectetur laborum reprehenderit veniam nostrud in duis ut duis ullamco dolore do adipisicing sed proident nostrud aute ut ea cupidatat exercitation sit elit.
<Accordion allowMultipleExpanded>
{items.map((item) => (
<AccordionItem key={item.uuid}>
<AccordionItemHeading>
<AccordionItemButton>
{item.heading}
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
{item.content}
</AccordionItemPanel>
</AccordionItem>
))}
</Accordion>
Same as above except with allowMultipleExpanded=false
What harsh truths do you prefer to ignore?
In pariatur
excepteur ut do aliquip qui mollit aliqua exercitation
excepteur consequat reprehenderit nostrud laborum voluptate veniam non dolore dolore aliqua incididunt amet nisi minim cillum elit.
Is free will real or just an illusion?
Dolor esse proident nisi minim nisi aute nulla sed proident magna id eiusmod consectetur laborum aliqua minim
excepteur sunt anim anim esse aliquip et ea enim proident veniam veniam quis adipisicing nulla amet id commodo.
Is there a meaning to life? If so, what is it?
Consectetur pariatur proident irure proident ea laboris ut do do quis consequat sed officia dolore consequat ut deserunt ea sit sit culpa.
Is the meaning of life the same for animals and humans?
Ex culpa eu veniam ea quis velit exercitation reprehenderit reprehenderit dolore pariatur incididunt occaecat ut irure ut sed dolor veniam sint incididunt esse duis duis dolore sunt aute incididunt amet quis.
Where is the line between art and not art?
Id aute tempor ad sunt et exercitation nulla duis dolore irure elit consectetur laborum reprehenderit veniam nostrud in duis ut duis ullamco dolore do adipisicing sed proident nostrud aute ut ea cupidatat exercitation sit elit.
<Accordion allowMultipleExpanded={false}>
{items.map((item) => (
<AccordionItem key={item.uuid}>
<AccordionItemHeading>
<AccordionItemButton>
{item.heading}
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
{item.content}
</AccordionItemPanel>
</AccordionItem>
))}
</Accordion>
Collapsing the last expanded item
If you set allowZeroExpanded to true then a solitary expanded item may be collapsed again.
What harsh truths do you prefer to ignore?
In pariatur
excepteur ut do aliquip qui mollit aliqua exercitation
excepteur consequat reprehenderit nostrud laborum voluptate veniam non dolore dolore aliqua incididunt amet nisi minim cillum elit.
Is free will real or just an illusion?
Dolor esse proident nisi minim nisi aute nulla sed proident magna id eiusmod consectetur laborum aliqua minim
excepteur sunt anim anim esse aliquip et ea enim proident veniam veniam quis adipisicing nulla amet id commodo.
Is there a meaning to life? If so, what is it?
Consectetur pariatur proident irure proident ea laboris ut do do quis consequat sed officia dolore consequat ut deserunt ea sit sit culpa.
Is the meaning of life the same for animals and humans?
Ex culpa eu veniam ea quis velit exercitation reprehenderit reprehenderit dolore pariatur incididunt occaecat ut irure ut sed dolor veniam sint incididunt esse duis duis dolore sunt aute incididunt amet quis.
Where is the line between art and not art?
Id aute tempor ad sunt et exercitation nulla duis dolore irure elit consectetur laborum reprehenderit veniam nostrud in duis ut duis ullamco dolore do adipisicing sed proident nostrud aute ut ea cupidatat exercitation sit elit.
<Accordion allowZeroExpanded>
{items.map((item) => (
<AccordionItem key={item.uuid}>
<AccordionItemHeading>
<AccordionItemButton>
{item.heading}
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
{item.content}
</AccordionItemPanel>
</AccordionItem>
))}
</Accordion>
Pre-expanded items
If you set preExpanded, then you can choose which items are expanded on mount.
The strings passed to preExpanded are directly related to the uuid props of AccordionItem.
What harsh truths do you prefer to ignore?
In pariatur
excepteur ut do aliquip qui mollit aliqua exercitation
excepteur consequat reprehenderit nostrud laborum voluptate veniam non dolore dolore aliqua incididunt amet nisi minim cillum elit.
Is free will real or just an illusion?
Dolor esse proident nisi minim nisi aute nulla sed proident magna id eiusmod consectetur laborum aliqua minim
excepteur sunt anim anim esse aliquip et ea enim proident veniam veniam quis adipisicing nulla amet id commodo.
Is there a meaning to life? If so, what is it?
Consectetur pariatur proident irure proident ea laboris ut do do quis consequat sed officia dolore consequat ut deserunt ea sit sit culpa.
Is the meaning of life the same for animals and humans?
Ex culpa eu veniam ea quis velit exercitation reprehenderit reprehenderit dolore pariatur incididunt occaecat ut irure ut sed dolor veniam sint incididunt esse duis duis dolore sunt aute incididunt amet quis.
Where is the line between art and not art?
Id aute tempor ad sunt et exercitation nulla duis dolore irure elit consectetur laborum reprehenderit veniam nostrud in duis ut duis ullamco dolore do adipisicing sed proident nostrud aute ut ea cupidatat exercitation sit elit.
<Accordion preExpanded={['a', 'c']}>
<AccordionItem uuid="a" /> // Will be expanded by default
<AccordionItem uuid="b" />
<AccordionItem uuid="c" /> // Will be expanded by default
<AccordionItem uuid="d" />
</Accordion>
Informative onChange
When you use the onChange prop, you can get feedback about which items are expanded.
In this example, we are simply logging the uuids of the expanded items to the console. Have a click around then check your console to see this in action.
What harsh truths do you prefer to ignore?
In pariatur
excepteur ut do aliquip qui mollit aliqua exercitation
excepteur consequat reprehenderit nostrud laborum voluptate veniam non dolore dolore aliqua incididunt amet nisi minim cillum elit.
Is free will real or just an illusion?
Dolor esse proident nisi minim nisi aute nulla sed proident magna id eiusmod consectetur laborum aliqua minim
excepteur sunt anim anim esse aliquip et ea enim proident veniam veniam quis adipisicing nulla amet id commodo.
Is there a meaning to life? If so, what is it?
Consectetur pariatur proident irure proident ea laboris ut do do quis consequat sed officia dolore consequat ut deserunt ea sit sit culpa.
Is the meaning of life the same for animals and humans?
Ex culpa eu veniam ea quis velit exercitation reprehenderit reprehenderit dolore pariatur incididunt occaecat ut irure ut sed dolor veniam sint incididunt esse duis duis dolore sunt aute incididunt amet quis.
Where is the line between art and not art?
Id aute tempor ad sunt et exercitation nulla duis dolore irure elit consectetur laborum reprehenderit veniam nostrud in duis ut duis ullamco dolore do adipisicing sed proident nostrud aute ut ea cupidatat exercitation sit elit.
<Accordion onChange={() => console.log('Hello world')}>
{items.map((item) => (
<AccordionItem key={item.uuid}>
<AccordionItemHeading>
<AccordionItemButton>
{item.heading}
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
{item.content}
</AccordionItemPanel>
</AccordionItem>
))}
</Accordion>
Accessing Item State
If you'd like to apply different content or styling based on the expanded or disabled state of an item, you might like to use the AccordionItemState render-prop component.
What harsh truths do you prefer to ignore?
State: {"expanded":false,"disabled":false}
In pariatur
excepteur ut do aliquip qui mollit aliqua exercitation
excepteur consequat reprehenderit nostrud laborum voluptate veniam non dolore dolore aliqua incididunt amet nisi minim cillum elit.
Is free will real or just an illusion?
State: {"expanded":false,"disabled":false}
Dolor esse proident nisi minim nisi aute nulla sed proident magna id eiusmod consectetur laborum aliqua minim
excepteur sunt anim anim esse aliquip et ea enim proident veniam veniam quis adipisicing nulla amet id commodo.
Is there a meaning to life? If so, what is it?
State: {"expanded":false,"disabled":false}
Consectetur pariatur proident irure proident ea laboris ut do do quis consequat sed officia dolore consequat ut deserunt ea sit sit culpa.
Is the meaning of life the same for animals and humans?
State: {"expanded":false,"disabled":false}
Ex culpa eu veniam ea quis velit exercitation reprehenderit reprehenderit dolore pariatur incididunt occaecat ut irure ut sed dolor veniam sint incididunt esse duis duis dolore sunt aute incididunt amet quis.
Where is the line between art and not art?
State: {"expanded":false,"disabled":false}
Id aute tempor ad sunt et exercitation nulla duis dolore irure elit consectetur laborum reprehenderit veniam nostrud in duis ut duis ullamco dolore do adipisicing sed proident nostrud aute ut ea cupidatat exercitation sit elit.
<Accordion>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>
This item is
<AccordionItemState>
{({ expanded }) => (expanded ? 'expanded' : 'collapsed')}
</AccordionItemState>
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<p>I am the content</p>
</AccordionItemPanel>
</AccordionItem>
</Accordion>
Manual state
When you use the dangerouslySetExpanded prop, you can manually override whether an AccordionItem is expanded.
Warning: This can impact accessibility negatively.
What harsh truths do you prefer to ignore?
In pariatur
excepteur ut do aliquip qui mollit aliqua exercitation
excepteur consequat reprehenderit nostrud laborum voluptate veniam non dolore dolore aliqua incididunt amet nisi minim cillum elit.
Is free will real or just an illusion?
Dolor esse proident nisi minim nisi aute nulla sed proident magna id eiusmod consectetur laborum aliqua minim
excepteur sunt anim anim esse aliquip et ea enim proident veniam veniam quis adipisicing nulla amet id commodo.
Is there a meaning to life? If so, what is it?
Consectetur pariatur proident irure proident ea laboris ut do do quis consequat sed officia dolore consequat ut deserunt ea sit sit culpa.
Is the meaning of life the same for animals and humans?
Ex culpa eu veniam ea quis velit exercitation reprehenderit reprehenderit dolore pariatur incididunt occaecat ut irure ut sed dolor veniam sint incididunt esse duis duis dolore sunt aute incididunt amet quis.
Where is the line between art and not art?
Id aute tempor ad sunt et exercitation nulla duis dolore irure elit consectetur laborum reprehenderit veniam nostrud in duis ut duis ullamco dolore do adipisicing sed proident nostrud aute ut ea cupidatat exercitation sit elit.
<Accordion>
{items.map((item, i) => {
const isExpanded = i < 2;
return (
<AccordionItem
key={item.heading}
uuid={item.uuid}
dangerouslySetExpanded={isExpanded}
>
<AccordionItemHeading>
<AccordionItemButton>
{item.heading}
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
{item.panel}
</AccordionItemPanel>
</AccordionItem>
);
})}
</Accordion>
