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:
| Name | Type | Required | Default | 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. |
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 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. |
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.
show to the class argument.{{< 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 >}}