accordion-simple
v0.1.4
Published
A simple, lightweight, drop-in accordion element.
Downloads
7
Maintainers
Readme
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.