Docs

Accordion

Last modified on June 20, 2025 • 4 min read • 753 words
Component  
Component  
Share via

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

Overview   Arguments   Examples   Flush   Always Open  

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

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
always-open bool Flag to make accordion items stay open when another item is opened.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
id string Unique identifier of the current element.
Name Type Required Default
always-open bool
Flag to make accordion items stay open when another item is opened.
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
id string
Unique identifier of the current element.

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

Name Type Required Default Comment
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
header string v1.0.0      Use title instead. Header of the accordion item.
show bool Flag to indicate an item should be shown. For elements with multiple items, only one item can be shown at a time.
title string, hstring.RenderedString, hstring.HTML, template.HTML v1.0.0      Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Name Type Required Default
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
header string
v1.0.0      Use title instead. Header of the accordion item.
show bool
Flag to indicate an item should be shown. For elements with multiple items, only one item can be shown at a time.
title string, hstring.RenderedString, hstring.HTML, template.HTML
v1.0.0      Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.

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 Markdown 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 Markdown content.
This is the third item’s accordion body.
markdown 
{{< accordion id="accordion-flush" class="accordion-flush" >}}
  {{< accordion-item title="Accordion Item #1" >}}
    This is the first item's accordion body. It supports Markdown content. The item is shown by
    adding the value `show` to the `class` argument.
  {{< /accordion-item >}}
  {{< accordion-item title="Accordion Item #2" >}}
    This is the second item's accordion body. It too supports Markdown content.
  {{< /accordion-item >}}
  {{< accordion-item title="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 Markdown 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 Markdown content.
This is the third item’s accordion body.
markdown 
{{< accordion id="accordion-always-open" always-open="true" >}}
  {{< accordion-item title="Accordion Item #1" >}}
    This is the first item's accordion body. It supports Markdown content. The item is shown by
    adding the value `show` to the `class` argument.
  {{< /accordion-item >}}
  {{< accordion-item title="Accordion Item #2" >}}
    This is the second item's accordion body. It too supports Markdown content.
  {{< /accordion-item >}}
  {{< accordion-item title="Accordion Item #3" >}}
    This is the third item's accordion body.
  {{< /accordion-item >}}
{{< /accordion >}}
On this page: