Accordion
Use the accordion shortcode to show a group of vertically collapsing and expanding items.
Use the accordion shortcode to show a group of vertically collapsing and expanding items. Add accordion-item inner elements for each accordion item.
show to the class argument.{{< 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 >}}The shortcode supports the following arguments:
| Argument | Required | Description |
|---|---|---|
| id | No | Optional id of the accordion, defaults to “accordion-n” with a sequential number n. |
| always-open | No | Optional flag to make accordion items stay open when another item is opened. |
| class | No | Optional 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:
| Argument | Required | Description |
|---|---|---|
| header | Yes | Required header of the accordion element. |
| class | No | Optional class attribute of the inner accordion element. |
| show | No | Optional flag to indicate an item should be shown as collapsed. |
Change the style of your accordion with class attributes and arguments.
Add .accordion-flush to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.
show to the class argument.{{< 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 >}}Set always-open to true to make accordion items stay open when another item is opened.
{{< 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 >}}