Accordion

Expandable content sections that allow users to show and hide related content.

Basic Usage

Accordion is composed of Accordion, Accordion.Item, Accordion.Header, Accordion.Content, and Accordion.Chevron. The Header slot is fully open — drop in any prism components to build the layout you want, then add Accordion.Chevron to surface the open/closed indicator.

By default the accordion is a single-open group: opening one item collapses any other open one.

First section
Opening another section will collapse this one.
Second section
Second section content.
Show code
Hide code
 
import { Accordion, Icon } from '@mylighthouse/prism-react';

export default function BasicExample(): React.ReactElement {
  return (
    <Accordion>
      <Accordion.Item defaultOpen>
        <Accordion.Header>
          <div className="flex gap-200 items-center">
            <Icon name="bookmark-outline" size="small" />
            <span className="text-300--medium">First section</span>
          </div>
          <Accordion.Chevron />
        </Accordion.Header>
        <Accordion.Content>
          Opening another section will collapse this one.
        </Accordion.Content>
      </Accordion.Item>

      <Accordion.Item>
        <Accordion.Header>
          <div className="flex gap-200 items-center">
            <Icon name="bookmark-outline" size="small" />
            <span className="text-300--medium">Second section</span>
          </div>
          <Accordion.Chevron />
        </Accordion.Header>
        <Accordion.Content>Second section content.</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Multiple Open

Pass the multiple prop to let several items stay open at once.

Section A
Both sections can be open at the same time.
Section B
Independent of section A.
Show code
Hide code
 
import { Accordion, Icon } from '@mylighthouse/prism-react';

export default function MultipleExample(): React.ReactElement {
  return (
    <Accordion multiple>
      <Accordion.Item defaultOpen>
        <Accordion.Header>
          <div className="flex gap-200 items-center">
            <Icon name="bookmark-outline" size="small" />
            <span className="text-300--medium">Section A</span>
          </div>
          <Accordion.Chevron />
        </Accordion.Header>
        <Accordion.Content>
          Both sections can be open at the same time.
        </Accordion.Content>
      </Accordion.Item>

      <Accordion.Item defaultOpen>
        <Accordion.Header>
          <div className="flex gap-200 items-center">
            <Icon name="bookmark-outline" size="small" />
            <span className="text-300--medium">Section B</span>
          </div>
          <Accordion.Chevron />
        </Accordion.Header>
        <Accordion.Content>Independent of section A.</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Disabled Item

Pass disabled to an Accordion.Item to lock it. Disabled items cannot be toggled by mouse or keyboard.

Available section
This section can be toggled.
Locked section
This section cannot be toggled.
Show code
Hide code
 
import { Accordion, Icon } from '@mylighthouse/prism-react';

export default function DisabledExample(): React.ReactElement {
  return (
    <Accordion>
      <Accordion.Item>
        <Accordion.Header>
          <div className="flex gap-200 items-center">
            <Icon name="bookmark-outline" size="small" />
            <span className="text-300--medium">Available section</span>
          </div>
          <Accordion.Chevron />
        </Accordion.Header>
        <Accordion.Content>This section can be toggled.</Accordion.Content>
      </Accordion.Item>

      <Accordion.Item disabled>
        <Accordion.Header>
          <div className="flex gap-200 items-center">
            <Icon name="bookmark-outline" size="small" />
            <span className="text-300--medium">Locked section</span>
          </div>
          <Accordion.Chevron />
        </Accordion.Header>
        <Accordion.Content>This section cannot be toggled.</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Accordion

Name Default Type Description
multiple -- boolean --

Accordion.Item

Name Default Type Description
defaultOpen -- boolean --
disabled -- boolean --

Accordion.Header

No component-specific props

Accordion.Content

No component-specific props

Accordion.Chevron

No component-specific props