accordion-simple
Version:
A simple, lightweight, drop-in accordion element.
60 lines (43 loc) • 2.86 kB
Markdown
[](https://www.npmjs.com/package/accordion-simple)
[](https://deepscan.io/dashboard#view=project&tid=11311&pid=14223&bid=258622)
[](https://travis-ci.com/jaredforth/accordion-simple)
[](https://codecov.io/gh/jaredforth/accordion-simple)
[](https://www.npmjs.com/package/accordion-simple)
# Simple Accordion
## Usage
**Install package**
`npm install accordion-simple`
**Import JavaScript**
In the `<footer>`, add `<script src="accordion-simple/dist/accordion.js"></script>`
**Optional Import Stylesheet**
If you want to use the boilerplate styles included, add `<link rel="stylesheet" href="accordion-simple/dist/styles.css"` in the `<head>`.
This is optional, and if you want to write your own styles, the accordion functionality will work with just the JavaScript.
**Markup**
This package requires an `<ul>` with the `.accordion` class, with child `<li>` that contain an `<a>` element that toggles the visibility of the initially hidden `<div>` element on click. An example can be found in the [example](./example) directory, or below:
```html
<ul class="accordion">
<li>
<a href="#">Accordion One</a>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium eros non venenatis iaculis.
Fusce finibus metus vel nulla fringilla convallis. Cras scelerisque pulvinar nisi. Vivamus id nibh magna
</div>
</li>
<li>
<a href="#">Accordion Two</a>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium eros non venenatis iaculis.
Fusce finibus metus vel nulla fringilla convallis. Cras scelerisque pulvinar nisi. Vivamus id nibh magna
</div>
</li>
<li>
<a href="#">Accordion Three</a>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium eros non venenatis iaculis. Fusce
finibus metus vel nulla fringilla convallis. Cras scelerisque pulvinar nisi. Vivamus id nibh magna
</div>
</li>
</ul>
```
## In Progress / Known Issues
- Add aria attributes dynamically
- Add real tests
## Improvement
This package is a work in progress, and any suggestions for improvement are welcome. Please [file a new issue](https://github.com/jaredforth/accordion-simple/issues/new) if you have any problems using this package or find ways in which it could be improved.