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
Handorgel is a simple yet modern, customizable, SEO-friendly, WAI-ARIA compliant accordion (tablist) library written in ES6.
2. Houdini
Houdini is a vanilla JavaScript plugin allows to toggle the visibility of block content with URL hashtag (deep link) support.
3. Badger Accordion
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
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
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
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
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
A flexible, customizable, responsive, mobile-friendly, WAI-ARIA compliant tabs & accordion component for the web.
9. Multilevel Accordion Menu with Plain HTML & CSS
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
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:
