Accordion

A stack of headings that open and close. One at a time by default.

A list whose headings toggle their content open and closed. One panel at a time by default; add openMultiple to let several stay open at once.

export const client = "only";

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <Accordion className="w-96" defaultValue={["freshness"]}>
      <AccordionItem value="freshness">
        <AccordionTrigger>集計はいつ更新されますか？</AccordionTrigger>
        <AccordionContent>
          毎時 05 分に前 1 時間分をまとめて取り込みます。
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="timezone">
        <AccordionTrigger>タイムゾーンは何ですか？</AccordionTrigger>
        <AccordionContent>
          日付の区切りはすべて Asia/Tokyo です。
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@squadbase/vantage/ui";

Parts

Part	Role
`Accordion`	The root. `value` / `defaultValue` is an array of open items
`AccordionItem`	One item, identified by `value`
`AccordionTrigger`	The heading button; the chevron comes for free
`AccordionContent`	The panel that opens

Several open at once

<Accordion openMultiple defaultValue={["a", "b"]}>

For one standalone disclosure, Collapsible is lighter.