Accordion

Share via

Link copied to clipboard

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.

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 #2

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

Accordion Item #3

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 Markdown content. The item is shown by
    adding the value `show` to the `class` argument.
  {{< /accordion-item >}}
  {{< accordion-item header="Accordion Item #2" >}}
    This is the second item's accordion body. It too supports Markdown 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:

Name	Type	Comment
always-open	bool	Flag to make accordion items stay open when another item is opened.
class	string	Class attribute of the accordion, e.g. `w-50`.
id	string	ID of the accordion, defaults to `accordion-n` with a sequential number n.

Name	Type	Required	Default
always-open	bool
Flag to make accordion items stay open when another item is opened.
class	string
Class attribute of the accordion, e.g. `w-50`.
id	string
ID of the accordion, defaults to `accordion-n` with a sequential number n.

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

Name	Type	Required	Comment
class	string		Class attribute of the accordion item.
header	string	yes	Header of the accordion item.
show	bool		Flag to indicate an item should be shown as collapsed.

Name	Type	Required
class	string
Class attribute of the accordion item.
header	string	yes
Header of the accordion item.
show	bool
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.

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 #2

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

Accordion Item #3

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 Markdown content. The item is shown by
    adding the value `show` to the `class` argument.
  {{< /accordion-item >}}
  {{< accordion-item header="Accordion Item #2" >}}
    This is the second item's accordion body. It too supports Markdown 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.

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 #2

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

Accordion Item #3

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

• Remove deprecated shortcode 'comment' (291614e)

On this page:

Docs

Overview

Arguments

Examples

Flush

Always Open