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
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) |
|---|---|---|---|---|
|
|
All of the items in the accordion. Each item should contain a header and a content. |
array
| — |
|
|
|
Allow only one section to open at a time. |
boolean
|
false
|
|
|
|
Hides the separator in between items. |
boolean
|
false
|
|
|
|
Creates a box shadow around the accordion. |
boolean
|
false
|
|
|
|
Controls the inset spacing of each item. |
string
|
medium
|
|
|
|
Vertically align the accordion trigger content and trigger icon. |
string
|
center
|
|
