Accordion¶

Render content in a box that expands and collapses vertically.

Examples¶

Default, and flush — the borderless style for edge-to-edge placement.

DefaultFlush

Usage

Fill the content slot with one or more Accordion Item components — each one renders its own collapsible header and body.

{% embed 'bootstrap_components:accordion' with {
  keep_open: false,
} %}
  {% block content %}
    {% include 'bootstrap_components:accordion_item' with {
      title: 'Accordion Item #1',
      content: '<p>Content for the first item.</p>',
      opened: true,
    } %}
    {% include 'bootstrap_components:accordion_item' with {
      title: 'Accordion Item #2',
      content: '<p>Content for the second item.</p>',
    } %}
  {% endblock %}
{% endembed %}

Removes the default background color, some borders, and some rounded corners to render the accordion edge-to-edge with its parent container.

Usage

{% embed 'bootstrap_components:accordion' with {
  variant: 'flush',
  keep_open: false,
} %}
  {% block content %}
    {% include 'bootstrap_components:accordion_item' with {
      title: 'Accordion Item #1',
      content: '<p>Content for the first item.</p>',
      opened: true,
    } %}
    {% include 'bootstrap_components:accordion_item' with {
      title: 'Accordion Item #2',
      content: '<p>Content for the second item.</p>',
    } %}
  {% endblock %}
{% endembed %}

Props¶

Prop	Type	Description	Example
`variant`	string	`default` or `flush`. Defaults to `default`.	`default`
`keep_open`	boolean	Make accordion items stay open when another item is opened.	`false`
`accordion_id`	string	Must start with a letter. Randomly generated if empty.

Slots¶

Slot	Description
`content`	Drop Accordion Item components here. Each item gets its own collapsible section with a title and body.

Variants¶

Variant	Description
`default`	Standard Bootstrap accordion styling.
`flush`	Removes the default background color, some borders, and some rounded corners to render edge-to-edge with the parent container.