Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.

Accordion
#

Allows you to control group of collapses.

Examples
#

Default
#

Default usage of the va-accordion component.

Open in GitHub

Multiple
#

Accordion component allows you to select multiple collapses.

Open in GitHub

Menu
#

One of the interesting ways to use the component is a collapsing menu.

Open in GitHub

Accessibility
#

Expand/collapse of accordion item in focus is dependent on multiple prop, for other accessability information see VaCollapse accessibility section.

API
#

Props #

NameDescriptionTypesDefault
inset

Collapse becomes smaller when activated

Boolean

false

modelValue

The value of the v-model bindings.

Array

[]

multiple

Allows to expand multiple components

Boolean

false

popout

Collapse becomes bigger when activated

Boolean

false

preset

Named preset combination of component props.

String | Array

-

stateful

Add possibility to work with component without setting v-model.

Boolean

true

Events #

NameDescription

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model

Slots #

NameDescription

default

Contains collapses

Change log #

v1.8.0
  • Removed flat prop and changed default look to flat

  • Stateful by default