Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

npm version Gitter Chat



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.



Installation with Veams

veams install component accordion
veams -i c accordion



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



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.



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.


No description, website, or topics provided.



No packages published