Accordion

Organize content in collapsible UI elements

An accordion in HTML/CSS is a collapsible content panel that allows users to toggle sections open and closed, benefiting user experience by conserving screen space while organizing complex information hierarchically.

Anatomy

import { Accordion } from '@onwo/ui';

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Trigger>...</Accordion.Trigger>
    <Accordion.Content>...</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>...</Accordion.Trigger>
    <Accordion.Content>...</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Default

<Accordion.Root class="w-full">
  <Accordion.Item>
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content> ... </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>Is it styled?</Accordion.Trigger>
    <Accordion.Content> ... </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>Is it animated?</Accordion.Trigger>
    <Accordion.Content> ... </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Single open

<Accordion.Root singleOpen class="w-full">
  <Accordion.Item>
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content> ... </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item defaultOpen>
    <Accordion.Trigger>Is it styled?</Accordion.Trigger>
    <Accordion.Content> ... </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Trigger>Is it animated?</Accordion.Trigger>
    <Accordion.Content> ... </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>