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.
On this page
Please check out the tutorial to
start using Hugo modules.
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" >}}
Firstly, …
Secondary, …
Flush Accordion Example
1{{< bs/accordion data="accordion.faq" flush=true >}}
Firstly, …
Secondary, …
Flush Accordion Example with alwaysOpen Enabled
1{{< bs/accordion data="accordion.faq" flush=true alwaysOpen=true >}}
Firstly, …
Secondary, …