Accordion

Vertically stacked sections where one panel can be expanded at a time. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue
import { UiAccordion } from '@ziyarago/ui/vue'

FAQ

Vue
<UiAccordion
  :items="[{ id: 'visa', title: 'Is the visa included?', body: 'Yes, visa processing is included in all Umrah packages.' }, { id: 'cancel', title: 'Can I cancel my booking?', body: 'Free cancellation up to 14 days before departure.' }, { id: 'kids', title: 'Do children pay full price?', body: 'Children under 2 travel free, ages 2 to 11 get a 30% discount.' }]"
 />

Sizes

Vue
<UiAccordion
  size="xs"
  :items="[{ id: 'visa', title: 'Is the visa included?', body: 'Yes, visa processing is included.' }]"
 />

<UiAccordion
  size="sm"
  :items="[{ id: 'visa', title: 'Is the visa included?', body: 'Yes, visa processing is included.' }]"
 />

<UiAccordion
  size="md"
  :items="[{ id: 'visa', title: 'Is the visa included?', body: 'Yes, visa processing is included.' }]"
 />

<UiAccordion
  size="lg"
  :items="[{ id: 'visa', title: 'Is the visa included?', body: 'Yes, visa processing is included.' }]"
 />

<UiAccordion
  size="xl"
  :items="[{ id: 'visa', title: 'Is the visa included?', body: 'Yes, visa processing is included.' }]"
 />

API reference

Vertical list of collapsible sections where one is open at a time; use for FAQs and grouped details.

Props

PropType and valuesDefaultDescription
items{ id: string; title: string; body: string | VNode }[]'[]'Sections. id must be unique; body is shown when the section is open.
sizexssmmdlgxl'md'Scale of header padding and text.

Notes

  • Open state is internal and single: opening one closes the others, all start closed.