Accordion plugin
An accordion contains multiple sections that can be expanded and collapsed separately. This can often be seen with FAQ-style content where the user is only interested in one or few sections and not the entire page.
This plugin is only available in the Complete bundle.
Description
An accordion is defined with the accordion CSS class, or by calling the accordion() plugin method on an element.
The accordion element contains the individual expandable sections.
Each section is a <div> element that has two children.
First, the section header as content of a <div> element.
Second, the actual section content in another <div> element.
Initially, all sections are collapsed.
The accordion colours can be customised with the CSS variables that start with “--accordion-”.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales a lacus in congue. Nam ultrices tempus nisl, eget rutrum tellus tincidunt et. Nullam condimentum ligula neque, quis aliquam arcu feugiat at. Fusce sed felis lacus.
Sed placerat condimentum leo ut ultrices. Vivamus sagittis ligula a est pretium elementum. Morbi laoreet tortor sit amet ligula euismod, eget auctor orci auctor. Quisque eu leo vitae ex vehicula fringilla. Morbi vehicula efficitur nulla a pretium.
Duis sit amet orci sit amet mi commodo dignissim. Curabitur ac risus ac ipsum tincidunt commodo.
Vivamus dolor libero, placerat sed lacus ut, pellentesque elementum sem.
Initially expanded items
To expand one or multiple items automatically at page load, add the expanded CSS class to the affected item(s).
If the exclusive option is set, only the first item with that class is initially expanded.
If an item will be expanded because of its id attribute matching the location hash, no items with that class are initially expanded.
Section 2 content
Section 3 content
Controls and events
Sections can be expanded and collapsed by code. The shown methods and events are described below.
Last event:
Exclusive mode
When the exclusive option is set to true, only a single section can be expanded at any time.
It is still possible that all sections are collapsed, though.
No icons
The no-icons CSS class removes the icons from the section headers.
No background
The no-background CSS class removes the background colour from the section headers.
It can, but should not be used together with the no-icons class because there will be no more visible hint that this is an interactive element.
The following example shows the usability issue.
In this case, another highlighting of the section headers should be applied, for example colour.
Single item expander
The accordion can also be used as a simple expander for a single item. It might contain details or additional settings that might not be of interest all the time.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum, sem a pellentesque lacinia, dui lacus mollis arcu, vitae tristique ante elit at neque. Suspendisse potenti.
Vestibulum dolor est, dignissim sed enim porttitor, interdum sagittis sem. Morbi sit amet ornare libero. Mauris scelerisque nulla vitae placerat efficitur. Donec cursus blandit tellus, et elementum tellus tincidunt sed. Donec congue urna a nunc cursus commodo.
Indent content
The indent CSS class can be added to an item to indent the content of the section to the same horizontal position as the header.
This is especially useful in combination with the no-background CSS class where it might not be so obvious where the content begins and ends.
It adapts to the combinations of the no-background and no-icons CSS classes for the accordion element.
Examples for these combinations are shown in the previous examples in item 3.
Anchors
If a section element has an id HTML attribute, the URL hash is set to the value of the expanded section until it is collapsed.
When reloading the page with such a hash name set, the corresponding accordion section is automatically expanded and scrolled to at load time.
Anchors with scroll offset
If there are fixed-position elements at the top of the page, scrolling to an item will leave it hidden behind the fixed-position element.
In this case, the scrollOffsetElement option can be set to an element (selector) whose height will be considered when scrolling.
Alternatively, the scrollOffset option can be set to a fixed height offset (in pixels) to keep clear when scrolling.
Both offsets can be used together and are added.
Options
The following options are available:
| Name | Type | Description | Default |
|---|---|---|---|
exclusive |
Boolean | Exclusive mode allows only one item to be expanded at a time. | false |
scrollOffset |
Number | Offset to consider when scrolling to an item, when there are fixed elements at the top. | 0 |
scrollOffsetElement |
Node, String | Element whose height to consider when scrolling to an item, as Node or CSS selector. Both offsets are added. | None |
Plugin methods
This plugin provides methods to control the accordion state.
collapse
collapse()→ Frontfirecollapse(indexOrItem)→ Frontfire
Collapses all items or the specified item. The item can be specified as the item element or its zero-based index. The item can be a Node or a Frontfire instance. If it is a Frontfire instance, only its first selected element will be used. Negative indexes are counted from the end, i.e. -1 is the last item, -2 the second-last etc.
expand
expand()→ Frontfireexpand(indexOrItem)→ Frontfire
Expands all items or the specified item. The item can be specified as the item element or its zero-based index. The item can be a Node or a Frontfire instance. If it is a Frontfire instance, only its first selected element will be used. Negative indexes are counted from the end, i.e. -1 is the last item, -2 the second-last etc.
Plugin events
This plugin triggers events for the accordion.
itemCollapse
Triggered when a section item was collapsed. The following properties are provided with the event:
item: The collapsed item element.
itemExpand
Triggered when a section item was expanded. The following properties are provided with the event:
item: The expanded item element.