10 Best Accordions Components In Pure JavaScript & CSS

Here is a constantly updated list of the 10 best JavaScript and CSS based Accordion components/widgets for FAQ systems and content toggle components. I hope you like it and don’t forget to spread the world.

Originally Published Nov 20 2017, updated Feb 25 2020

1. Modern Accessible Accordion In JavaScript (ES6) – Handorgel

Modern Accessible Accordion In JavaScript (ES6) - Handorgel

Demo Download

Handorgel is a simple yet modern, customizable, SEO-friendly, WAI-ARIA compliant accordion (tablist) library written in ES6.


2. Houdini

Basic Accordion & Content Toggle JS Library – Houdini

Demo Download

Houdini is a vanilla JavaScript plugin allows to toggle the visibility of block content with URL hashtag (deep link) support.


3. Badger Accordion

Smooth Accessible Accordion Plugin In Pure JavaScript – Badger Accordion

Demo Download

Badger Accordion is a simple, performant, accessible JavaScript accordion plugin that uses CSS3 animations for the smooth expand/collapse effects.


4. Simple Accessible Accordion In Vanilla JS – A11y-Accordion

Simple Accessible Accordion In Vanilla JS - A11y-Accordion

Demo Download

A11y-Accordion is a progressive enhancement Vanilla JavaScript plugin that adds keyboard navigation and WAI-ARIA roles to your accordion to make it more accessible for keyboard and screen reader users.


5. Simple Plain Accordion Interface

Simple Plain Accordion Interface In Pure JS/CSS

Demo Download

A pure JavaScript/CSS solution to help you create a vertical, configurable, smooth sliding accordion interface from plain html structure.


6. Accessible SEO-friendly Accordion In JavaScript – Vanilla-Js-Accordion

accessible-seo-accordion-in-javascript-vanilla-js-accordion

Demo Download

A lightweight, accessible, SEO-friendly accordion component built using vanilla JS, HTML unordered list and ARIA attribute.


7. Basic Accessible Accordion Component In Vanilla JS – Van11y

Basic Accessible Accordion Component In Vanilla JS - Van11y

Demo Download

This is the Vanilla JavaScript version of the jQuery Accessible Accordion Aria plugin to implement a configurable, WAI-ARIA compliant accordion component in plain JavaScript.


8. Accessible Tabs & Accordion Component In JavaScript – a11y-accordion-tabs

accessible-tabs-accordion

Demo Download

A flexible, customizable, responsive, mobile-friendly, WAI-ARIA compliant tabs & accordion component for the web.


9. Multilevel Accordion Menu with Plain HTML & CSS

Multilevel Accordion Menu with Plain HTML & CSS

Demo Download

A simple Html5 / CSS3 approach to making a multilevel sliding accordion menu from nested html lists. It uses checkbox+label hacks for toggling hierarchical menus and several CSS3 properties for smooth sliding effects.


10. Pure CSS Responsive Horizontal Accordion

Pure CSS Responsive Horizontal Accordion

Demo Download

A responsive horizontal accordion created by ferry that makes use of CSS3 transitions and transforms to smoothly expand accordion items on mouse hover.


More Resources:

To find more JavaScript and/or CSS libraries to create accordion interfaces on the web app, don’t forget to check out our other awesome resources:

You Might Be Interested In: