Bootstrap Accordion Shortcode
A detailed guide of using the Bootstrap accordion shortcode to build vertically accordions. The FAQ is the most common use case of Bootstrap accordion component.
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
Syntax§
1{{< bs/accordion >}}
Parameters§
data§
| Position | Name | Type | Default | Required |
|---|---|---|---|---|
#0 | data | string | - | Y |
The data filename without extension, for example,
| Path | Data |
|---|---|
data/faq.yaml | faq |
data/faq.toml | faq |
data/faq.json | faq |
data/sub/faq.yaml | sub.faq |
data/sub/faq.toml | sub.faq |
data/sub/faq.json | sub.faq |
alwaysOpen§
| Position | Name | Type | Default | Required |
|---|---|---|---|---|
| - | alwaysOpen | boolean | false | - |
When true, make accordion items stay open when another item is opened.
flush§
| Position | Name | Type | Default | Required |
|---|---|---|---|---|
| - | flush | boolean | false | - |
When true, remove some borders and rounded corners to render accordions edge-to-edge with their parent container.
Data Item Properties§
title§
The title of accordion item.
content§
The content of accordion item, Markdown is support.
weight§
The weight of accordion item, the lower weight gets higher priority.
show§
The first item’s content will be shown by default, but you can change it via this property.
Data File Example§
data/accordion/example.yaml
1first:
2 weight: 1
3 title: Step One
4 content: __Firstly__, ...
5second:
6 weight: 2
7 title: Step Two
8 content: __Secondary__, ...
Examples§
Default Accordion Example§
1{{< bs/accordion "accordion.faq" >}}
A1, …
A2, …
Flush Accordion Example§
1{{< bs/accordion data="accordion.faq" flush=true >}}
A1, …
A2, …
Flush Accordion Example with alwaysOpen Enabled§
1{{< bs/accordion data="accordion.faq" flush=true alwaysOpen=true >}}
A1, …
A2, …