a javascript + css library for accordions, without any runtime dependencies like jQuery
Vanilla Accordions is an accordion library written in plain-old vanilla javascript. There are no dependencies, no jQuery needed, completely framework-agnostic. It uses Web Components to create a "native" accordion that just works. Here's an example of how easy it is to create an accordion:
<accordion-element data-title="Here's an accordion">
<!-- everything you want in your accordion goes here -->
</accordion-element>To be completely honest, I was bored and wanted to start a side project. I saw that there is an excellent accordion library called AccordionJS, but it depends on jQuery. After a quick search I didn't find any pure vanilla JS accordion libraries that use modern web technologies, so I decided to build one.
- easy-to-use syntax - just plop in the js and css files into your project, add them to your html page, and use the
<accordion-element>to create an accordion - easy to customize - styles are provided in both less and css, with some pre-created css variables to help customize your accordions
- tiny - combined, the minified sources are just over 1.5kb when gZipped
- supports nested accordions and accordion groups - accordions can be grouped with a
data-groupattribute so that only those in the same group close when one is opened, allowing for nested accordions - auto-update accordion title and body - using class setters, an accordion's title and contents can be updated without you having to touch the dom, making changes to the accordion as simple as a single line of code
Want to check it out? click this link and try out the demo page.