2.9.2

Accordion

Accordion Component in Bolt

The Accordion component is a vertical list of items, each of which can be expanded or collapsed to show more content.

Install via NPM
npm install @bolt/components-accordion
  {% 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 %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

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
  • [items]:
    • Type: object
    • Properties:
      • trigger

        Trigger content of an item.

        • Type: string , object , array
      • content

        Expandable content of an item.

        • Type: string , object , array
      • open

        Automatically expand an item on page load.

        • Type: boolean
      • inactive

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

        • Type: boolean
      • uuid

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

        • Type: string
      • open_label

        Accessible label for the open trigger to expand an item.

        • Type: string
      • close_label

        Accessible label for the close trigger to collapse an item.

        • Type: string
Single

Allow only one section to open at a time.

boolean false
  • true, false
No_separator

Hides the separator in between items.

boolean false
  • true, false
Box_shadow

Creates a box shadow around the accordion.

boolean false
  • true, 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, center