## Basic usage Use accordions for FAQs, advanced options, or any content that would overwhelm the page if shown inline. Default mode is single-open: clicking another item closes the previous one. ```mdx How do I connect a custom domain? Open **Settings → Domains**, add your domain, then create a CNAME record pointing to `cname.codivdocs.com`. SSL is provisioned automatically. Can I use my own GitHub repo? Yes. Install the CodivDocs GitHub App on your repo, then connect it from the dashboard. How does search work? Postgres tsvector full-text search out of the box. AI-powered semantic search ships in Phase 5. ``` How do I connect a custom domain? Open **Settings → Domains**, add your domain, then create a CNAME record pointing to `cname.codivdocs.com`. SSL is provisioned automatically. Can I use my own GitHub repo? Yes. Install the CodivDocs GitHub App on your repo, then connect it from the dashboard. How does search work? Postgres tsvector full-text search out of the box. AI-powered semantic search ships in Phase 5. ## Multiple items open at once Set `type="multiple"` to allow more than one item to be expanded simultaneously. Useful when readers might want to compare two sections side by side. ```mdx Option A Content for option A Option B Content for option B Option C Content for option C ``` Option A Content for option A. Option B Content for option B. Option C Content for option C. ## Default expanded items Use `defaultValue` to pre-open one or more items on first render. Pass a string in single mode, or an array in multiple mode. ```mdx Installation (open by default) npm install @codivdocs/sdk Usage ... ``` ```mdx ... ``` ## Single mode: collapsible In single mode, by default the active item cannot be closed by clicking again — there's always exactly one open. Set `collapsible` to allow closing the open item: ```mdx ... ``` When to enable: FAQ pages where the reader might want to "close" the current question. When NOT to enable: forced-disclosure flows like a wizard where one step must always be visible. ## Nested content Accordion content can include any other component — code blocks, callouts, cards, even nested accordions: ```mdx Advanced configuration These settings are for power users only. ```json { "experimentalFeature": true } ``` ``` ## Props ### Accordion | Prop | Type | Default | Description | |------|------|---------|-------------| | `type` | `"single" \| "multiple"` | `"single"` | Whether one or many items can be open | | `collapsible` | `boolean` | `false` | Allow closing the open item (single mode only) | | `defaultValue` | `string \| string[]` | — | Item(s) open on first render | ### AccordionItem | Prop | Type | Required | Description | |------|------|----------|-------------| | `value` | `string` | Yes | Unique identifier for the item | ### AccordionTrigger / AccordionContent | Prop | Type | Description | |------|------|-------------| | `children` | `ReactNode` | Trigger button content / collapsible body | ## When to use - **FAQs** — Classic use case, keeps the page scannable - **Advanced options** — Hide rarely-used settings behind a disclosure - **Long detail sections** — Summary visible, details one click away For navigable table-of-contents, use the sidebar — not accordions.