Accordion
Extended from PrimeVue accordion
Single expand
By default, accordions will only allow one item to be expanded at a time. Upon expanding a second item, the open item will collapse.
Single expand, minimal variant
The minimal variant is designed to be used within a block of long-form content to better match headings and text alignment.
Single expand, starts collapsed
If no initial expanded id is provided, each item will start collapsed.
Single expand with v-model
If you want to control the accordion programmatically or trigger a UI change elsewhere when a specific item is expanded, you can use the v-model directive to bind the active id to a data value. The initial state of the data value must be a valid accordion id.
Multiple expand
This variant allows more than one item to be expanded at a time. Do not use in conjunction with v-model.
Using v-for
Example using v-for to construct the children es-accordion elements.
EsAccordionList props
- Name
allowMultipleExpand
- Type
Boolean
- Default
false
- Description
- Defaults to false, which only allows one item to expand at a time. If true, allows multiple items to expand at a time. Do not use at the same time as v-model.
- Name
initialExpandedId
- Type
String
- Default
- n/a
- Description
- The id of the item that should begin expanded when the component mounts. If omitted, all items will start out collapsed. Do not use at the same time as v-model.
- Name
variant
- Type
String
- Default
default
- Description
- Defaults to 'default'; also accepts 'minimal'. Default has a rounded white background, minimal has no background, Heading 3 text style, reduced padding, and a horizontal border separating accordions.
EsAccordion props
- Name
id
- Type
String
- Default
- n/a
- Description
- Required. Used to uniquely identify the item on the page. This value can also be passed to EsAccordionList to signify that this item should start out expanded.
- Name
headingTag
- Type
String
- Default
h3
- Description
- Defaults to h3. The tag used can be customized as needed. For example, if the accordion is used within a section that is already under an <h3>, it may need to be an h4.