Bootstrap Accordion Shortcode
Shortcode to build vertically accordions, the FAQs is the most common use case.
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
Syntax
1{{< bs/accordion >}}
Parameters
data
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#0 | data | string | ✓ | - | - | - |
The data filename without extension.
flush
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | flush | boolean | - | false | - | - |
When true, remove some borders and rounded corners to render accordions edge-to-edge with their parent container.
alwaysOpen
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | alwaysOpen | boolean | - | false | - | - |
When true, make accordion items stay open when another item is opened.
Data Files Mapping
| 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 |
Data Item Properties
title
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
title | - | string | - | - | - | - |
The title of accordion item.
content
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
content | - | string | - | - | - | - |
The content of accordion item, Markdown is support.
weight
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
weight | - | string | - | - | - | - |
The weight of accordion item, the lower weight gets higher priority.
show
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
show | - | string | - | - | - | - |
The first item’s content will be shown by default, but you can change it via this property.
Data File Example
data/accordion/faq.yaml
1- title: Q1
2 content: __A1__, ...
3- title: Q2
4 content: __A2__, ...
Examples
Default Accordion Example
Source
1{{< bs/accordion "accordion.faq" >}}Result
A1, …
A2, …
Flush Accordion Example
Source
1{{< bs/accordion data="accordion.faq" flush=true >}}Result
A1, …
A2, …
Flush Accordion Example with alwaysOpen Enabled
Source
1{{< bs/accordion data="accordion.faq" flush=true alwaysOpen=true >}}Result
A1, …
A2, …