accordion-simple

jaredforth
js Styles
accordion-simple JS library homepage accordion-simple JS library on GitHub accordion-simple JS library on npm Download accordion-simple JS library

A simple, lightweight, drop-in accordion element.

Version 0.1.4 License MIT
accordion-simple JS library homepage
accordion-simple JS library on GitHub
accordion-simple JS library on npm
Download accordion-simple JS library
Keywords
accordionsimplewidgetcomponentcollapsecollapsabletypescriptsassscss
INSTALL
Type:
Version:
<script type="module"> import accordionSimple from 'https://cdn.jsdelivr.net/npm/accordion-simple@0.1.4/+esm' </script>
Learn more
Readme Files Statistics Browse CDN

npm DeepScan grade Build Status codecov npm

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.