Accordion

Share via

Use the accordion shortcode to show a group of vertically collapsing and expanding items.

Overview

Use the accordion shortcode to show a group of vertically collapsing and expanding items. Add accordion-item inner elements for each accordion item.

This is the first item’s accordion body. It supports HTML content. The item is shown by adding the value show to the class argument.

This is the second item’s accordion body. It too supports HTML content.

This is the third item’s accordion body.
markdown
{{< accordion id="accordion-default" >}}
  {{< accordion-item header="Accordion Item #1" show="true" >}}
    This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
    <code>show</code> to the <code>class</code> argument.
  {{< /accordion-item >}}
  {{< accordion-item header="Accordion Item #2" >}}
    This is the second item's accordion body. It too supports HTML content.
  {{< /accordion-item >}}
  {{< accordion-item header="Accordion Item #3" >}}
    This is the third item's accordion body.
  {{< /accordion-item >}}
{{< /accordion >}}

Arguments

The shortcode supports the following arguments:

ArgumentRequiredDescription
idNoOptional id of the accordion, defaults to “accordion-n” with a sequential number n.
always-openNoOptional flag to make accordion items stay open when another item is opened.
classNoOptional class attribute of the accordion element, e.g. “w-50”.

Add an inner accordion-item element for each item of the accordion. The accordion-item element supports the following arguments:

ArgumentRequiredDescription
headerYesRequired header of the accordion element.
classNoOptional class attribute of the inner accordion element.
showNoOptional flag to indicate an item should be shown as collapsed.

Examples

Change the style of your accordion with class attributes and arguments.

Flush

Add .accordion-flush to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.

This is the first item’s accordion body. It supports HTML content. The item is shown by adding the value show to the class argument.

This is the second item’s accordion body. It too supports HTML content.

This is the third item’s accordion body.
markdown
{{< accordion id="accordion-flush" class="accordion-flush" >}}
  {{< accordion-item header="Accordion Item #1" >}}
    This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
    <code>show</code> to the <code>class</code> argument.
  {{< /accordion-item >}}
  {{< accordion-item header="Accordion Item #2" >}}
    This is the second item's accordion body. It too supports HTML content.
  {{< /accordion-item >}}
  {{< accordion-item header="Accordion Item #3" >}}
    This is the third item's accordion body.
  {{< /accordion-item >}}
{{< /accordion >}}

Always open

Set always-open to true to make accordion items stay open when another item is opened.

This is the first item’s accordion body. It supports HTML content. The item is shown by adding the value show to the class argument.

This is the second item’s accordion body. It too supports HTML content.

This is the third item’s accordion body.
markdown
{{< accordion id="accordion-always-open" always-open="true" >}}
  {{< accordion-item header="Accordion Item #1" >}}
    This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
    <code>show</code> to the <code>class</code> argument.
  {{< /accordion-item >}}
  {{< accordion-item header="Accordion Item #2" >}}
    This is the second item's accordion body. It too supports HTML content.
  {{< /accordion-item >}}
  {{< accordion-item header="Accordion Item #3" >}}
    This is the third item's accordion body.
  {{< /accordion-item >}}
{{< /accordion >}}
Last updated: May 21, 2023 • Fix linting issues (775b0ea)
On this page