Accordion

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.

Arguments

The shortcode supports the following arguments:

ArgumentRequiredDescription
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.

Example

As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.

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 >}}
  {{< 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 >}}
Last updated: February 12, 2023 • Upgrade to docs v0.9 (2caaad8)
On this page