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
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="ln">1</span><span class="cl">- <span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Q1</span><span class="w">
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, …