How it works
To render an accordion that's expanded, add the active class on the AccordionItem.
Example
Click the accordions below to expand/collapse the accordion content.
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body , though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body , though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body , though the transition does limit overflow. vue
<template>
<Accordion parent>
<AccordionSection
title="Accordion Item #1"
:active="true"
>
<strong>This is the first item's accordion body.</strong>
It is shown by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control the
overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML
can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionSection>
<AccordionSection title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionSection>
<AccordionSection title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionSection>
</Accordion>
</template>
AccordionSection is a composite component.
If more detailed customization is needed, you can use the AccordionItem component.
vue
<template>
<Accordion parent>
<AccordionItem active>
<AccordionHeader level="2">
<AccordionButton>Accordion Item #1</AccordionButton>
</AccordionHeader>
<AccordionCollapse>
<AccordionBody>
<strong>This is the first item's accordion body.</strong>
It is shown by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control the
overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML
can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionBody>
</AccordionCollapse>
</AccordionItem>
<AccordionItem>
<AccordionHeader level="2">
<AccordionButton>Accordion Item #2</AccordionButton>
</AccordionHeader>
<AccordionCollapse>
<AccordionBody>
<strong>This is the second item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionBody>
</AccordionCollapse>
</AccordionItem>
<AccordionItem>
<AccordionHeader level="2">
<AccordionButton>Accordion Item #3</AccordionButton>
</AccordionHeader>
<AccordionCollapse>
<AccordionBody>
<strong>This is the third item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionBody>
</AccordionCollapse>
</AccordionItem>
</Accordion>
</template>
Flush
Add flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body , though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body , though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body , though the transition does limit overflow. vue
<template>
<Accordion
parent
flush
>
<AccordionSection
title="Accordion Item #1"
>
<strong>This is the first item's accordion body.</strong>
It is shown by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control the
overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML
can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionSection>
<AccordionSection title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionSection>
<AccordionSection title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionSection>
</Accordion>
</template>
Always open
Omit the parent attribute on each AccordionCollapse component to make accordion items stay open when another item is opened.
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body , though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body , though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body , though the transition does limit overflow. vue
<template>
<Accordion>
<AccordionSection
title="Accordion Item #1"
:active="true"
>
<strong>This is the first item's accordion body.</strong>
It is shown by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control the
overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML
can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionSection>
<AccordionSection title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionSection>
<AccordionSection title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</AccordionSection>
</Accordion>
</template>
Methods
AccordionItem
| Method | Description |
|---|---|
toggle | Switch manually |
show | Open manually |
hide | Manually hide |
Events
| Event | Description |
|---|---|
| current-changed | Occurs when the selected item is changed. |
Demo
#1
#2
#3
: :
Extend
Theme colors
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
All colors
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.
This is the first item's accordion body.
This is the second item's accordion body.