Skip to content

Accordion

Accordions collapse lengthy content into expandable sections. In Nuxt / PLAI use UAccordion or UCollapsible.

Element Source
Borders, surfaces, summary text Nuxt UI zinc neutrals
Focus ring on summary CI link blue
What is included in PLAI Core?

Case management, document upload, and AI-assisted research for a single workspace.

Can I share cases externally?

Yes — invite collaborators with viewer or editor roles. Sharing respects Mandantengeheimnis settings.

How is data stored?

Documents are encrypted at rest in EU regions. See the security whitepaper for details.

Click summaries or use Enter / Space when focused. Tab moves between summaries.

<div class="ci-accordion">
<details class="ci-accordion__item">
<summary class="ci-accordion__summary">Section title</summary>
<div class="ci-accordion__content">
<p>Section body.</p>
</div>
</details>
</div>
  • Native <details> provides keyboard support without custom JS.
  • Use clear summary text — it acts as the control label.
  • Avoid nesting accordions more than one level deep.
  • For FAQ pages, one open section at a time is optional (close others via JS if required).
  • Tabs — mutually exclusive panels
  • Card — static grouped content