VAccordion

Hardison Co. provides 2 accordion components with enough styling to be able to use them out of the box: <VAccordion /> and <VCollapse />. In the simple accordion, each item can be openened separately, whereas in the exclusive accordion, only one item can be expanded at a time. Pass an Array to the items props to render the accordion.

Accordion Item 1
Sed ut perspiciatis unde omnis iste ...
Accordion Item 2
Sed ut perspiciatis unde omnis iste ...
Accordion Item 3
Sed ut perspiciatis unde omnis iste ...
Accordion Item 1
Sed ut perspiciatis unde omnis iste ...
Accordion Item 2
Sed ut perspiciatis unde omnis iste ...
Accordion Item 3
Sed ut perspiciatis unde omnis iste ...

<VAccordion> Props

NameDefaultType
:exclusive
undefined
boolean | undefined
:items
[]
{ title: string; content: string; }[]
:open-items
[]
number[] | undefined

<VAccordion> Slots

NameType
#accordion-item
{ item: { title: string; content: string; }; index: number; toggle: (key: number) => void; }
#accordion-item-content
{ item: { title: string; content: string; }; index: number; toggle: (key: number) => void; }
#accordion-item-summary
{ item: { title: string; content: string; }; index: number; toggle: (key: number) => void; }