Accordion
Description
The component represents a simple accordion with transitions and max-height.
Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.
The accordion is based on the blueprint of Veams-Components and is a wrap-with component to support flexible content with predefined surrounded markup.
The accordion is jQuery-free (we use Veams-Query) and contains some accessiblity functionality.
Requirements
Veams >= v5.0.0- Veams Framework.
Installation
Installation with Veams
veams install vc accordion
Fields
accordion.hbs
Settings
- settings.accContextClass {
String} [default] - Context class of component. - settings.accClasses {
String} - Modifier classes for component. - settings.accJsOptions {
Object} - JavaScript options which gets stringified.
accordion__item.hbs
Settings
- settings.accNoWrapper {
Boolean} - Hide wrapper div.accordion__item.
Further Parameters
- accItemId {
String} - Id of the accordion item. - accButton {
String} - Button text for accordion item.
JavaScript Options
The module gives you the possibility to override default options:
- activeClass {
String} ['is-active'] - Define the active class for active elements. - accordionBtn {
String} ['[data-js-item='accordion-btn']'] - Define the element for accordion buttons. - accordionContent {
String} ['[data-js-item="accordion-content"]'] - Define the element for accordion content items. - calculatingClass {
String} ['is-calculating'] - Define the calculating class for the initial calculation cycle. - clickHandler {
String} ['click'] - Define a click handler for the buttons. - closeClass {
String} ['is-closed'] - Define the closing class for accordion content items. - dataMaxAttr {
String} ['data-js-height'] - Define the attribute in which the calculated height is saved. - openAllOnInit {
Boolean} [false] - If set to true, all panels stays open on render. - openByHash {
Boolean} [false] - If set to true, panel can be opened by url hash referencing the id of the panel. - openClass {
Boolean} ['is-open'] - Define the opening class for accordion content items. - openIndex {
Number} [null] - Index of panel to be opened on init (zero based). - openOnViewports {
Array} [ ['desktop', 'tablet-large', 'tablet-small'] ] - Viewports on which the openIndex panel is opened on init. - singleOpen {
Boolean} [false] - If set to true, only one panel can be opened at the same time. - tabMode {
Boolean} [false] - If set to true, the accordion behaves like a tab module (click on active button will not close corresponding panel). - unresolvedClass {
String} ['is-unresolved'] - Define the unresolved class for the whole accordion which will be deleted afterinitialize()andrender()is finished.
Sass Options
There are multiple global variables which you can change:
- $accordion-toggle-duration [
300ms !default] - Speed of toggling. - $accordion-transition-method [
ease !default] - Transition method of toggle effect. - $accordion-icon-color [
#666 !default] - + icon color. - $accordion-icon-width [
30px !default] - + icon width. - $accordion-icon-height [
2px !default] - + icon height. - $accordion-btn-color
[$accordion-icon-color !default] - Accordion button color. - $accordion-btn-bg-color [
rgba(255, 255, 255, 0.5) !default] - Background color of the accordion button. - $accordion-padding [
1rem !default] - Default padding which will be used in the accordion.