Accordion

import Basic from '!!raw-loader!../examples/Accordion/Basic'; import AllCollapse from '!!raw-loader!../examples/Accordion/AllCollapse'; import Flush from '!!raw-loader!../examples/Accordion/Flush'; import AlwaysOpen from '!!raw-loader!../examples/Accordion/AlwaysOpen'; import CustomToggle from '!!raw-loader!../examples/Accordion/CustomToggle.js'; import ContextAwareToggle from '!!raw-loader!../examples/Accordion/ContextAwareToggle.js';

Examples

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

Basic Example

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.

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.

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.

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

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.

API

Accordion

AccordionItem

AccordionHeader

AccordionBody

AccordionButton

AccordionCollapse

useAccordionButton

import useAccordionButton from 'react-bootstrap/useAccordionButton';

const decoratedOnClick = useAccordionButton(eventKey, onClick);