An accessible JS accordion library.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
docs
src
test
.babelrc
.eslintrc
.gitignore
.npmignore
LICENSE
README.md
package.json
rollup.config.js

README.md

butane-accordion

butane-accordion on NPM Standard JavaScript Style

A lightweight accessible accordion JS library.

Install

Install butane-accordion, and add it to your package.json dev dependencies.

$ npm install butane-accordion --save-dev

Then import it into the file where you'll use it.

import ButaneAccordion from 'butane-accordion'

Instantiate

ButaneAccordion.init()

Options

By default only one accordion panel can be opened at a time. To allow for multiple panels to be open, add data-butane-accordion-multiple along side data-butane-accordion to allow for that type of functionality.

<dl role="presentation" data-butane-accordion data-butane-accordion-multiple>
  ...
</dl>

Expected DOM structure

Below is the minimum required elements and attributes needed.

<dl role="presentation" data-butane-accordion>
  <dt role="heading" aria-level="2">
    <button aria-expanded="false" aria-controls="sect1" id="button1">Section 1</button>
  </dt>
  <dd id="sect1" aria-labeledby="button1" hidden>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt unde dignissimos fuga voluptatum molestias qui aut, temporibus beatae officia! Voluptate aspernatur dignissimos maxime qui temporibus minus beatae magni autem.</p>
  </dd>
</dl>

License

MIT. © 2017 Alex Carpenter