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 directory, or below:
<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 if you have any problems using this package or find ways in which it could be improved.