2.21.0

Accordion

Accordion Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-accordion
Source code
View on Github
Dependencies
@bolt/components-icon @bolt/core-v3.x handorgel

Overview

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
Overview Usage Schema Edit this page

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.

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
        • Enum: true or false
      • 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
      • trigger_spacing

        Overrides the default trigger spacing (by default, inherited from the parent bolt-accordion)

        • Type: string
        • Enum: none, xsmall, small, medium, large
      • content_spacing

        Overrides the default content spacing (by default, inherited from the parent bolt-accordion)

        • Type: string
        • Enum: none, xsmall, small, medium, large
single

Allow only one section to open at a time.

 boolean false
  • true or false
no_separator

Hides the separator in between items.

 boolean false
  • true or false
box_shadow

Creates a box shadow around the accordion.

 boolean false
  • true or 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
Debug Panel