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 Jan 16 2025
1. HTML & CSS Only FAQ Accordion
A simple and smooth FAQ accordion component created using CSS and HTML <details> <summary> elements.
2. 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.
3. Responsive Tabs & Accordion Component In Vanilla JavaScript
A responsive tabs & accordion JavaScript plugin that works perfectly on desktop, tablet, and mobile.
4. Flexbox Based Vertical Accordion With Pure CSS
A smooth, responsive, vertical accordion UI that expands the current accordion panel on mouse hover, built using pure CSS and flexbox model.
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. Responsive CSS Only Accordion & Tabs Component
Yet another pure CSS tabs that will be automatically converted into a vertical accordion interface on mobile devices. Based on CSS flexbox and radio/label hacks.
7. Create Nested Accordion & Content Toggle UI With JavaScript – handy-collapse.js
A small vanilla JavaScript plugin used for creating nested accordion and/or content toggle interfaces with smooth slide up/down effects.
8. Smooth Accordion With Details Disclosure Element
Create a smoothly collapsible accordion using JavaScript, CSS3 animations, and <details> and <summary> elements.
9. Smooth Responsive Accordion UI
A responsive, nice-looking accordion UI with smooth transitions. Built with HTML, CSS (SCSS), and a little bit of JavaScript.
10. Build Responsive Accordions With Vanilla JS And CSS3
A tiny JavaScript library that helps you create responsive collapsing accordion elements using plain JavaScript and CSS. Ideal for FAQs, tabs, and show/hide UIs.
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: