Storm Tab Accordion


Accessible tab and accordion ui component for multi-panelled content areas.

Example

https://stormid.github.io/storm-tab-accordion

Usage

HTML
``

Item 1

One

Item 2

Two

Item 3

Three

`

JS
`
npm i -S storm-tab-accordion
`
either using es6 import
`
import TabAccordion from 'storm-tab-accordion';

TabAccordion.init('.js-tab-accordion');
`
aynchronous browser loading (use the .standalone version in the /dist folder)
`
import Load from 'storm-load';

Load('/content/js/async/storm-tab-accordion.standalone.js')
.then(() => {
StormTabAccordion.init('.js-tab-accordion');
});
`

CSS
Example CSS

`
.tab-accordion__nav {
display:none;
}
.tab-accordion__title.active {
background-color:#eee;
}
.tab-accordion__inner {
position: relative;
padding:2rem;
background-color:#eee;
}

@media(min-width:768px){
.tab-accordion__title {
display:none;
}
.tab-accordion__nav {
display:block;
overflow: hidden;
}
.tab-accordion__section.active {
background:#eee;
}
}
`

Options


`
{
tabClass: '.js-tab-accordion-tab',
titleClass: '.js-tab-accordion-title',
currentClass: 'active',
active: 0
}
`

e.g.
`
TabAccordion.init('.js-tab-accordion');
`

Tests


`
npm run test
``

Browser support

This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.

This module depends upon Object.assign available in all evergreen browsers. ie9+ is supported with polyfills, ie8+ will work with even more polyfills for Array functions and eventListeners.

Dependencies

None

License

MIT