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/core - Veams Core Framework.
• @veams/query or jquery - Veams Query or jQuery.
• @veams/component - Veams Component.
• @veams/helpers - Veams Detection Helpers.

Installation

Installation with Veams

veams install component accordion

veams -i c accordion

Fields

accordion-usage.hbs

The partial is a \{{#wrapWith}} helper. Documentation for wrapWith helper.

accordion.hbs

Settings

| Parameter | Type | Value | Description | |:--- | :---: |:---: | :--- | | 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

| Parameter | Type | Description | |:--- | :---: | :--- | | settings.accNoWrapper | Boolean | Hide wrapper div .accordion__item. |

| Parameter | Type | Description | |:--- | :---: | :--- | | 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:

| Option | Type | Default | Description | |:--- | :---: |:---: |:--- | | 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 | ['tablet-s', 'tablet-l', 'desktop-s', 'desktop-m', 'desktop-l'] | Viewports on which the openIndex panel is opened on init. | | removeStyles | Boolean | false | If set to true, | | 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 (clicking on active button will not close the corresponding panel). | | unresolvedClass | String | 'is-unresolved' | Define the unresolved class for the whole accordion which will be deleted after didMount() and render() is finished. |

Sass Options

There are multiple global variables which you can change:

| Variable | Value | Description | |:--- | :---: |:--- | | $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: | 15px !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, .5) !default | Background color of the accordion button. | | $accordion-padding: | 1rem !default | Default padding which will be used in the accordion. |