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 Mar 18 2022
1. HTML & CSS Only FAQ Accordion
A simple and smooth FAQ accordion component created using CSS and HTML <details> <summary> elements.
2. 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.
3. Smooth Accordion With Details Disclosure Element
Create a smoothly collapsible accordion using JavaScript, CSS3 animations, and <details> and <summary> elements.
4. 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.
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. 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.
7. 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.
8. Smooth Vertical Accordion Menu With JavaScript And CSS3
A smooth vertical accordion menu created with JavaScript, CSS, CSS3 transitions, Font Awesome, and nested HTML lists.
9. Responsive Tabs/Accordion In Vanilla JavaScript
A native JavaScript plugin to generate mobile-friendly horizontal or vertical tabs from unordered HTML lists.
10. Pure CSS Horizontal Responsive Image Accordion Slider
A pure CSS/CSS3 based responsive accordion slider that allows you to horizontally expands the images on mouse hover. On small screens such as mobile devices, the accordion slider will be transformed into a vertical image list to fit its parent container.
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: