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