Tabs and accordions

Components4 min read|
|

Use tabs to organize alternative content (like platform-specific instructions) and accordions for expandable sections (like FAQs).

Tabs

Tabs let readers switch between related content panels without leaving the page:

<wc-tabs> <wc-tab label="macOS"> Install with Homebrew: \```bash brew install node \``` </wc-tab> <wc-tab label="Linux"> Install with your package manager: \```bash sudo apt install nodejs \``` </wc-tab> <wc-tab label="Windows"> Download the installer from [nodejs.org](https://nodejs.org). </wc-tab> </wc-tabs>

Install with Homebrew:

brew install node

Install with your package manager:

sudo apt install nodejs

Download the installer from nodejs.org.

The text displayed on the tab button.

When to use tabs

  • Platform-specific instructions (macOS, Linux, Windows)
  • Package manager alternatives (npm, pnpm, yarn)
  • Language variants (JavaScript, Python, Go)
  • Framework-specific examples (React, Vue, Angular)

Accordions

Accordions hide content behind a clickable title. Readers expand only the sections they need:

<wc-accordion title="How do I install DocsLit?"> Run `npm install -g docslit` or use `npx` to run it without installing. </wc-accordion> <wc-accordion title="What Node.js version do I need?"> DocsLit requires Node.js 24.0.0 or later. </wc-accordion>

Run npm install -g docslit or use npx to run it without installing.

DocsLit requires Node.js 24.0.0 or later.

The clickable heading text that toggles the section. Set to `true` to expand the accordion by default.

Accordion groups

Wrap accordions in wc-accordion-group for a visually connected set with continuous borders:

<wc-accordion-group> <wc-accordion title="Can I use custom components?"> Yes. Place `.js` files in the `components/` directory and they load automatically. </wc-accordion> <wc-accordion title="Does DocsLit support versioning?"> Yes. Configure `versions` in `docslit.json` to maintain docs for multiple releases. </wc-accordion> <wc-accordion title="Can I deploy to any hosting provider?"> Yes. The `docslit build` output is a standard static site that works anywhere. </wc-accordion> </wc-accordion-group>

Yes. Place .js files in the components/ directory and they load automatically.

Yes. Configure versions in docslit.json to maintain docs for multiple releases.

Yes. The docslit build output is a standard static site that works anywhere.

Expandable sections

Use wc-expandable for a simpler collapsible section:

<wc-expandable title="Show advanced options"> These options are for advanced users who need fine-grained control over the build output. - `--offline` — Build a self-contained offline site - `--out <dir>` — Custom output directory </wc-expandable>

These options are for advanced users who need fine-grained control over the build output.

  • --offline — Build a self-contained offline site
  • --out <dir> — Custom output directory