aether-accordion

An easy-to-use, performant, full tested and configurable accordion UI component written in Vanilla JS.

Check the Storybook ↗

All the use cases are demonstrated and documented at the Storybook. Also, each example is provided with the source code so you can understand how to use it yourself.

Features:

Fast and easy to use
Documented through stories
Advanced API
SASS variables
CSS transitions
Events
Nesting
AJAX content

Install

npm install aether-accordion --save

Quick start

You should import styles the way it suits you the most from the right location:

Minified CSS: aether-accordion/lib/style.css
Source SASS: aether-accordion/src/style.scss

Then, run the init function in JavaScript:

import initAetherAccordion from 'aether-accordion'

initAetherAccordion({ element: 'dl' })

<dl>
  <dt>Section 1</dt>
  <dd>
    <p>Section 1 Content...</p>
  </dd>
  <dt>Section 2</dt>
  <dd>
    <p>Section 2 Content...</p>
  </dd>
  <dt>Section 3</dt>
  <dd>
    <p>Section 3 Content...</p>
  </dd>
</dl>

For more advanced use cases refer to the Storybook.

Development

Run the Storybook

npm start

Run linters

npm run lint

Run tests

npm test

Get coverage

npm run coverage

Build the lib

npm run build

desko27/aether-accordion