{% 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 %}| 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
| — |
|
|
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
|
|
|
icon_valign
|
Vertically align the accordion trigger content and trigger icon. |
string
|
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
| — |
|
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
| — |
|
npm install @bolt/components-accordion