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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Risus in hendrerit gravida rutrum. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Mi tempus imperdiet nulla malesuada pellentesque elit.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Risus in hendrerit gravida rutrum. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Mi tempus imperdiet nulla malesuada pellentesque elit.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Risus in hendrerit gravida rutrum. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Mi tempus imperdiet nulla malesuada pellentesque elit.

Content associated with "Lorem ipsum dolor sit amet, consectetur adipiscing elit?"

Multiple expand

This variant allows more than one item to be expanded at a time. Do not use in conjunction with v-model.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Risus in hendrerit gravida rutrum. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Mi tempus imperdiet nulla malesuada pellentesque elit.

Using v-for

Example using v-for to construct the children es-accordion elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Risus in hendrerit gravida rutrum. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Mi tempus imperdiet nulla malesuada pellentesque elit.

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.