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.

Syntax

1{{< bs/accordion >}}

Parameters

data

PositionNameTypeDefaultRequired
#0datastring-Y

The data filename without extension, for example,

PathData
data/faq.yamlfaq
data/faq.tomlfaq
data/faq.jsonfaq
data/sub/faq.yamlsub.faq
data/sub/faq.tomlsub.faq
data/sub/faq.jsonsub.faq

alwaysOpen

PositionNameTypeDefaultRequired
-alwaysOpenbooleanfalse-

When true, make accordion items stay open when another item is opened.

flush

PositionNameTypeDefaultRequired
-flushbooleanfalse-

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, …