Collapse

The Collapse component displays collapsible sections of content. It's useful for hiding and revealing information interactively.

Default

Each item expands or collapses when clicked.

TalkJS is a messaging API that enables developers to build chat features into apps with minimal effort.

Billing is based on the number of monthly active users (MAU) and includes all core features.

Yes! We offer a generous free tier so you can get started without entering a credit card.

<Collapse.Group>
  <Collapse.Item title="What is TalkJS?">
    TalkJS is a messaging API that enables developers to build chat features into apps with minimal effort.
  </Collapse.Item>
  <Collapse.Item title="How does billing work?">
    Billing is based on the number of monthly active users (MAU) and includes all core features.
  </Collapse.Item>
  <Collapse.Item title="Can I try it for free?">
    Yes! We offer a generous free tier so you can get started without entering a credit card.
  </Collapse.Item>
</Collapse.Group>

Expanded

You can expand items by default by using the prop defaultOpen.

TalkJS is a messaging API that enables developers to build chat features into apps with minimal effort.

Billing is based on the number of monthly active users (MAU) and includes all core features.

Yes! We offer a generous free tier so you can get started without entering a credit card.

<Collapse.Group>
  <Collapse.Item title="What is TalkJS?" defaultOpen>
    TalkJS is a messaging API that enables developers to build chat features into apps with minimal effort.
  </Collapse.Item>
  <Collapse.Item title="How does billing work?" defaultOpen>
    Billing is based on the number of monthly active users (MAU) and includes all core features.
  </Collapse.Item>
  <Collapse.Item title="Can I try it for free?" defaultOpen>
    Yes! We offer a generous free tier so you can get started without entering a credit card.
  </Collapse.Item>
</Collapse.Group>

Usage

Import the Collapse component and use Collapse.Group to wrap multiple Collapse.Item elements. Each item requires a title prop and content as children. The Collapse component can be referenced using the following format:

import { Collapse } from "../../components/Collapse";