Accordion

Usage

Accordions provide a quick way to vertically show or hide content and functionality.

Common Characteristics

All accordions have a label that toggles content below it to show or hide.

A 150ms transition is used to expand the content area down, and 75ms to collapse it up.

Filter Accordion

The filter accordion accommodates a clear function that clears all selections within a filter category. It is hidden when there are no selections.

The content panel height can be specified as needed, and supports internal scrolling if needed. Expanding a content panel does not change the state of any other filter section.

Makes

Models

VIN

Menu Accordion

Each menu accordion content panel accommodates the height of its content and does not allow internal scrolling. Expanding one content panel collapses any other expanded section.

Item 1

Accordion Content

Item 2

Accordion Content

Item 3

Accordion Content

Code

Default Accordion

Live Editor

<Accordion> <Accordion.Item title="Item 1"> <p>Accordion Content</p> </Accordion.Item> <Accordion.Item title="Item 2"> <p>Accordion Content</p> </Accordion.Item> <Accordion.Item defaultOpen={true} title="Item 3"> <p>Accordion Content</p> </Accordion.Item> </Accordion>

<Accordion>
  <Accordion.Item title="Item 1">
    <p>Accordion Content</p>
  </Accordion.Item>
  <Accordion.Item title="Item 2">
    <p>Accordion Content</p>
  </Accordion.Item>
  <Accordion.Item defaultOpen={true} title="Item 3">
    <p>Accordion Content</p>
  </Accordion.Item>
</Accordion>

Result

Loading...

---

Accordion Closed

Live Editor

<Accordion open={false}> <Accordion.Item title="Item 1"> <p>Accordion Content</p> </Accordion.Item> <Accordion.Item title="Item 2"> <p>Accordion Content</p> </Accordion.Item> </Accordion>

<Accordion open={false}>
  <Accordion.Item title="Item 1">
    <p>Accordion Content</p>
  </Accordion.Item>
  <Accordion.Item title="Item 2">
    <p>Accordion Content</p>
  </Accordion.Item>
</Accordion>

Result

Loading...

Accordion Items are all open by default unless open is set to false.

---

Open an Accordion Item

Live Editor

<Accordion> <Accordion.Item defaultOpen={true} title="Item 1"> <p>Accordion Content</p> </Accordion.Item> <Accordion.Item title="Item 2"> <p>Accordion Content</p> </Accordion.Item> </Accordion>

<Accordion>
  <Accordion.Item defaultOpen={true} title="Item 1">
    <p>Accordion Content</p>
  </Accordion.Item>
  <Accordion.Item title="Item 2">
    <p>Accordion Content</p>
  </Accordion.Item>
</Accordion>

Result

Loading...

To set an Accordion Item to open by default, set defaultOpen to true on that item.

---

Open all Accordion Items

Live Editor

<Accordion open collapseSiblings={false}> <Accordion.Item title="Item 1"> <p>Accordion Content</p> </Accordion.Item> <Accordion.Item title="Item 2"> <p>Accordion Content</p> </Accordion.Item> </Accordion>

<Accordion open collapseSiblings={false}>
  <Accordion.Item title="Item 1">
    <p>Accordion Content</p>
  </Accordion.Item>
  <Accordion.Item title="Item 2">
    <p>Accordion Content</p>
  </Accordion.Item>
</Accordion>

Result

Loading...

collapseSiblings prop has to be set when using open to prevent other accordion items closing when closing one of the items. Otherwise it will have confusing behavior.

Accordion with an onChange Callback Function

Explicitly adding ids to Accordion Item/Input components is recommended. UUIDs are generated by default.

Menu Accordion

Live Editor

<Accordion onChange={(accordionState) => { console.log(accordionState); }} > <Accordion.Item id="item-1" title="Item 1"> <p>Accordion Content</p> </Accordion.Item> <Accordion.Item id="item-2" title="Item 2"> <p>Accordion Content</p> </Accordion.Item> </Accordion>

<Accordion
  onChange={(accordionState) => {
    console.log(accordionState);
  }}
>
  <Accordion.Item id="item-1" title="Item 1">
    <p>Accordion Content</p>
  </Accordion.Item>
  <Accordion.Item id="item-2" title="Item 2">
    <p>Accordion Content</p>
  </Accordion.Item>
</Accordion>

Result

Loading...

Filter Accordion

Live Editor

<Accordion onChange={(accordionState) => { console.log(accordionState); }} > <Accordion.Item id="item-1" title="Item 1" variant="filter"> <p>Accordion Content</p> </Accordion.Item> <Accordion.Item id="item-2" title="Item 2" variant="filter"> <p>Accordion Content</p> </Accordion.Item> </Accordion>

<Accordion
  onChange={(accordionState) => {
    console.log(accordionState);
  }}
>
  <Accordion.Item id="item-1" title="Item 1" variant="filter">
    <p>Accordion Content</p>
  </Accordion.Item>
  <Accordion.Item id="item-2" title="Item 2" variant="filter">
    <p>Accordion Content</p>
  </Accordion.Item>
</Accordion>

Result

Loading...

---

Accordion Input / Filter Accordion Variant

Live Editor

<Accordion> <Accordion.Input onChange={(e) => console.log(e)} title="Makes"> <Input className="mb-2" type="text" placeholder="Input Accordion" /> </Accordion.Input> </Accordion>

<Accordion>
  <Accordion.Input onChange={(e) => console.log(e)} title="Makes">
    <Input className="mb-2" type="text" placeholder="Input Accordion" />
  </Accordion.Input>
</Accordion>

Result

Loading...

---

Clearble Accordion Input

Live Editor

<Accordion> <Accordion.Input onChange={(e) => console.log("example", e)} onClear={(clearState) => console.log(clearState)} variant="filter" title="Makes" > <Searchable> <Searchable.Search /> <Searchable.List data={[ { label: "Audi", count: 32, value: "Audi", id: "_audi_" }, { label: "BMW", count: 12, value: "BMW", id: "_bmw_" }, ]} /> </Searchable> </Accordion.Input> </Accordion>

<Accordion>
  <Accordion.Input
    onChange={(e) => console.log("example", e)}
    onClear={(clearState) => console.log(clearState)}
    variant="filter"
    title="Makes"
  >
    <Searchable>
      <Searchable.Search />
      <Searchable.List
        data={[
          { label: "Audi", count: 32, value: "Audi", id: "_audi_" },
          { label: "BMW", count: 12, value: "BMW", id: "_bmw_" },
        ]}
      />
    </Searchable>
  </Accordion.Input>
</Accordion>

Result

Loading...

The Accordion.Input is a controlled component, since it is meant to be used with inputs as children. To use the clearble/onClear feature, manage the state of the component from your app. The onClear function returns a boolean value: true when it is clicked.

Accordion Props

property	propType	required	default	description
open	bool	-	false
id	string	-	-

Accordion.Item Props

property	propType	required	default	description
isOpen	bool	-	true
triggerTag	string	-	'div'
id	string	-	-
triggerClassName	string	-	-
children	node	-	-
defaultOpen	bool	-	-
title	string	-	-
variant	string	-	-
onClear	func	-	-
onChange	func	-	-
clearable	bool	-	-

Accordion.Input Props

property	propType	required	default	description
id	string	-	-
children	node	-	-
onClear	func	-	-
defaultOpen	bool	-	-
onChange	func	-	-
clearable	bool	-	-
onSubmit	func	-	-