Skip to main content

Accordion

Build vertically collapsing accordions in combination with the Collapse component

Examples

Click the accordions below to expand/collapse the accordion content.

Basic Example

Result
Loading...
Live Editor

Fully Collapsed State

If you want your Accordion to start in a fully-collapsed state, then simply don't pass in a defaultActiveKey prop to Accordion.

Result
Loading...
Live Editor

Flush

Add flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

Result
Loading...
Live Editor

Always open

You can make accordion items stay open when another item is opened by using the alwaysOpen prop. If you're looking to control the component, you must use an array of strings for activeKey or defaultActiveKey.

Result
Loading...
Live Editor

Custom Accordions

You can still create card-based accordions like those in Bootstrap 4. You can hook into the Accordion toggle functionality via useAccordionButton to make custom toggle components.

Custom Toggle

Result
Loading...
Live Editor

Custom Toggle with Expansion Awareness

You may wish to have different styles for the toggle if it's associated section is expanded, this can be achieved with a custom toggle that is context aware and also takes advantage of the useAccordionButton hook.

Result
Loading...
Live Editor

API

Accordion

AccordionItem

AccordionHeader

AccordionBody

AccordionButton

AccordionCollapse

useAccordionButton

import { useAccordionButton } from 'react-bootstrap/AccordionButton';

const decoratedOnClick = useAccordionButton(eventKey, onClick);