Accordion

A vertical list of items, each of which can be expanded or collapsed to show more content.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-accordion/accordion.twig" with {
  items: [
    {
      trigger: "Accordion item 1",
      content: "This is the accordion content.",
    },
    {
      trigger: "Accordion item 2",
      content: "This is the accordion content.",
    },
    {
      trigger: "Accordion item 3",
      content: "This is the accordion content.",
    }
  ]
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Accordion
Prop Name Description Type Default Value Option(s)
items

All of the items in the accordion. Each item should contain a header and a content.

array
  • See below
single

Allow only one section to open at a time.

boolean false
no_separator

Hides the separator in between items.

boolean false
box_shadow

Creates a box shadow around the accordion.

boolean false
spacing

Controls the inset spacing of each item.

string medium
  • none , xsmall , small , medium , large
icon_valign

Vertically align the accordion trigger content and trigger icon.

string center
  • top or center
scroll_offset_selector

Selects a fixed element on the page, offsets smooth scrolling by the height of that element. Must be a valid CSS selector.

string
scroll_offset

Additional offset for smooth scrolling, integer converted to pixel value.

integer
Accordion: items
Prop Name Description Type Default Value Option(s)
trigger

Trigger content of an item.

string , object , array Toggle Accordion
content

Expandable content of an item.

string , object , array
open

Automatically expand an item on page load.

boolean false
inactive

Display item trigger as an inactive element. Item content will be collapsed and the toggle icon hidden.

boolean false
id

Unique identifier for each item, may be used for deep linking.

string
open_label

Accessible label for the open trigger to expand an item.

string Open Accordion
close_label

Accessible label for the close trigger to collapse an item.

string Close Accordion
uuid
(deprecated)

Internal use only. Unique ID for an item, randomly generated if not provided.

string
Install Install
  npm install @bolt/components-accordion
Dependencies @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue @ungap/url-search-params handorgel wc-context