Overview

Accordions use Card components to provide styling of the Accordion components. Use Accordion.Toggle to provide a button that switches between each Accordion.Collapse component.

Examples

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

Collapsible Cards

Borderless Variant

Add the .borderless class to the Accordion component to create a borderless variant.

Small Variant

Add the .accordion-sm class to the Accordion component to create a smaller variant.

Collapsible Lists

You can use Accordion combination with other UI Elements to create collapsible content.

API

Accordion

import Accordion from `@trimbleinc/modus-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

onSelect
SelectCallback
bsPrefix
string
'accordion'

Accordion.Toggle

import Accordion.Toggle from `@trimbleinc/modus-react-bootstrap/Accordion.Toggle`
NameTypeDefaultDescription
as
elementType
<button>

Set a custom element for this component

eventKey required
string

A key that corresponds to the collapse component that gets triggered when this has been clicked.

onClick
function

A callback function for when this component is clicked

Accordion.Collapse

import Accordion.Collapse from `@trimbleinc/modus-react-bootstrap/Accordion.Collapse`
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.