Bootstrap Accordion Shortcode

Shortcode to build vertically accordions, the FAQs is the most common use case.

Syntax

1{{< bs/accordion >}}

Parameters

data

PositionNameTypeRequiredDefaultSince
#0datastring--

The data filename without extension.

flush

PositionNameTypeRequiredDefaultSince
-flushboolean-false-

When true, remove some borders and rounded corners to render accordions edge-to-edge with their parent container.

alwaysOpen

PositionNameTypeRequiredDefaultSince
-alwaysOpenboolean-false-

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

Data Files Mapping

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

Data Item Properties

title

NameContextTypeRequiredDefaultSince
title-string---

The title of accordion item.

content

NameContextTypeRequiredDefaultSince
content-string---

The content of accordion item, Markdown is support.

weight

NameContextTypeRequiredDefaultSince
weight-string---

The weight of accordion item, the lower weight gets higher priority.

show

NameContextTypeRequiredDefaultSince
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

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