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 Dec 18 2018
1. Smooth Vertical Accordion Panels with Pure JS and CSS3
A pure JavaScript/HTML5/CSS approach to create a vertical accordion with smooth sliding effects based on CSS3 transitions.
2. Simple Vertical Accordion UI In Vanilla JavaScript
A lightweight, standalone vanilla JavaScript library for creating a vertical accordion UI for your web application.
3. Simple Plain Accordion Interface
A pure JavaScript/CSS solution to help you create a vertical, configurable, smooth sliding accordion interface from plain html structure.
4. Badger Accordion
Badger Accordion is a simple, performant, accessible JavaScript accordion plugin that uses CSS3 animations for the smooth expand/collapse effects.
5. Minimalist Accordion Plugin For Vanilla JavaScript
A dead simple accordion plugin written in pure vanilla JavaScript that allows you to toggle the visibility of content panels on click.
6. Houdini
Houdini is a vanilla JavaScript plugin allows to toggle the visibility of block content with URL hashtag (deep link) support.
7. handy-collapse.js
handy-collapse.js is a small vanilla JavaScript plugin used for creating nested accordion and/or content toggle interfaces with smooth slide up/down effects.
8. A11Y Accordion
a11y-accordion-component is a library written in vanilla JavaScript to easily create easy-to-config, WAI-ARIA compliant accordion on the web app.
9. accordion-init
Just another PURE JavaScript solution to create a modern, smooth-sliding accordion component for your FAQ system.
10. collapsible.js
collapsible.js is a dependency-free content toggle JavaScript plugin to smoothly collapse & expand content panels just like Accordion.