Accordion
A vertical list of items, each of which can be expanded or collapsed to show more content.
{% 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
By setting the single prop to true, it allows only one item to be opened at a time.
Single open item
Multiple open items (default)
By setting the no_separator prop to true, it will remove the separator in between items.
Accordion with separators
Accordion without separators
By setting the box_shadow prop to true, it will create a box shadow around the accordion.
Box shadow
Box shadow, no separator
No box shadow
By setting the spacing prop to none, xsmall, small, medium, or large, it applies the appropriate inset spacing for each accordion item. The default is medium.
Spacing: none
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Spacing: xsmall
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Spacing: small
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Spacing: medium
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Spacing: large
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
By setting the icon_valign prop to top or center, it will vertically align the trigger and the icon accordingly.
Icon Valign: top
Icon Valign: center
Set the inactive prop to true on any accordion item to display the trigger as an inactive element. It will have the same font-styles as the other triggers but none of the interactive styles. It will not be clickable, and that item's content and toggle icon will always be hidden.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Accordion inside various themes
Accordion with shadow inside various themes
Using the grid inside trigger and content
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.
Pass various components into the content
| Col 1 | Col 2 | Col 3 | |
|---|---|---|---|
| Row 1 | R1C1 | R1C2 | R1C3 |
| Row 2 | R2C1 | R2C2 | R2C3 |
| Row 3 | R3C1 | R3C2 | R3C3 |
| Footer | FC1 | FC2 | FC3 |
This is a headline
This is regular text. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et.
Example Q&A
scroll_offset_selector to select the "fixed" element. That will offset the scroll position by the "fixed" element's height. Use scroll_offset for any additional adjstments. See a demo: ?selected-accordion-item=item-3.
By setting the content_spacing or trigger_spacing prop to an Accordion Item, the default spacing value inherited from the parent Accordion can be optionally overridden.
Basic usage: spacing
Using spacing will uniformly set the same spacing on both the trigger and the content.
spacing prop defined.
spacing prop defined.
spacing prop defined.
Advanced usage: content spacing
Using content_spacing will only set the spacing on the content container. This should only be used if you don't want the same spacing on both the trigger and the content.
content_spacing prop defined.
content_spacing prop defined.
content_spacing prop defined.
Advanced usage: trigger spacing
Using trigger_spacing will only set the spacing on the trigger container. This should only be used if you don't want the same spacing on both the trigger and the content.
trigger_spacing prop defined.
trigger_spacing prop defined.
trigger_spacing prop defined.
bolt-accordion element containing any number of bolt-accordion-item elements to create an accordion. Inside each bolt-accordion-item mark the "trigger" content with the attribute slot="trigger". Everything else is considered accordion "content".
<bolt-accordion>
<bolt-accordion-item>
<bolt-text slot="trigger">Accordion item 1</bolt-text>
<bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text>
</bolt-accordion-item>
<bolt-accordion-item>
<bolt-text slot="trigger">Accordion item 2</bolt-text>
<bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text>
</bolt-accordion-item>
<bolt-accordion-item>
<bolt-text slot="trigger">Accordion item 3</bolt-text>
<bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text>
</bolt-accordion-item>
</bolt-accordion>no-separator. Use this prop rather than the separator prop used in Twig.
<bolt-accordion spacing="small" icon-valign="top" box-shadow no-separator multiple>
<bolt-accordion-item>
<bolt-text slot="trigger">Accordion item 1 with a lot of text in the trigger, which could wrap to multiple lines, and this trigger and the icon are vertically aligned center</bolt-text>
<bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text>
</bolt-accordion-item>
<bolt-accordion-item>
<bolt-text slot="trigger">Accordion item 2</bolt-text>
<bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text>
</bolt-accordion-item>
<bolt-accordion-item>
<bolt-text slot="trigger">Accordion item 3</bolt-text>
<bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text>
</bolt-accordion-item>
</bolt-accordion>bolt-accordion-item by adding the open prop.
<bolt-accordion>
<bolt-accordion-item>
<bolt-text slot="trigger">Accordion item 1</bolt-text>
<bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text>
</bolt-accordion-item>
<bolt-accordion-item open>
<bolt-text slot="trigger">Accordion item 2</bolt-text>
<bolt-text>This item is opened by default. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text>
</bolt-accordion-item>
<bolt-accordion-item>
<bolt-text slot="trigger">Accordion item 3</bolt-text>
<bolt-text>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</bolt-text>
</bolt-accordion-item>
</bolt-accordion>