🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

butane-accordion

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

butane-accordion

A lightweight accessible accordion JS library

1.0.0-alpha.6
latest
npm
Version published
Weekly downloads
7
40%
Maintainers
1
Weekly downloads
 
Created
Source

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

Keywords

accessibility

FAQs

Package last updated on 27 Sep 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts