Accordion

    Build vertically collapsing accordions in combination with the Collapse component.

    Examples

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

    Basic Example

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    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.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    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.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    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

    Hello! I'm the body
    Hello! I'm another body

    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.

    Hello! I'm the body
    Hello! I'm another body

    API

    Accordion

    import Accordion from 'react-bootstrap/Accordion'
    NameTypeDefaultDescription
    activeKey
    string

    The current active key that corresponds to the currently expanded card

    as
    elementType

    Set a custom element for this component

    defaultActiveKey
    string

    The default active key that is expanded on start

    flush
    boolean

    Renders accordion edge-to-edge with its parent container

    bsPrefix
    string
    		'accordion'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Accordion.Item

    import Accordion from 'react-bootstrap/Accordion'
    NameTypeDefaultDescription
    as
    elementType
    		<div>

    Set a custom element for this component

    eventKey required
    string

    A unique key used to control this item's collapse/expand.

    bsPrefix
    string
    		'accordion-item'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Accordion.Header

    import Accordion from 'react-bootstrap/Accordion'
    NameTypeDefaultDescription
    as
    elementType
    		<h2>

    Set a custom element for this component

    onClick
    function

    Click handler for the AccordionButton element

    bsPrefix
    string
    		'accordion-header'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Accordion.Body

    import Accordion from 'react-bootstrap/Accordion'
    NameTypeDefaultDescription
    as
    elementType
    		<div>

    Set a custom element for this component

    bsPrefix
    string
    		'accordion-body'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Accordion.Button

    import Accordion from 'react-bootstrap/Accordion'
    NameTypeDefaultDescription
    as
    elementType
    		<button>

    Set a custom element for this component

    onClick
    function

    A callback function for when this component is clicked

    bsPrefix
    string
    		'accordion-button'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Accordion.Collapse

    import Accordion from 'react-bootstrap/Accordion'
    NameTypeDefaultDescription
    children required
    element

    Children prop should only contain a single child, and is enforced as such

    eventKey required
    string

    A key that corresponds to the toggler that triggers this collapse's expand or collapse.

    useAccordionButton

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

const decoratedOnClick = useAccordionButton(eventKey, onClick);