10 Best Accordion Components In Pure JavaScript & CSS (2021 Update)

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 Apr 07 2021

1. 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.


2. 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.


3. 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.


4. Create Nested Accordion & Content Toggle UI With JavaScript – handy-collapse.js

Create Nested Accordion & Content Toggle UI With JavaScript – handy-collapse.js

Demo Download

A small vanilla JavaScript plugin used for creating nested accordion and/or content toggle interfaces with smooth slide up/down effects.


5. Responsive CSS Only Accordion & Tabs Component

responsive-css-only-accordion-tabs-component

Demo Download

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.


6. Pure CSS Horizontal Responsive Image Accordion Slider

Pure CSS Horizontal Responsive Image Accordion Slider

Demo Download

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.


7. Smooth Accordion With Details Disclosure Element

Smooth Accordion With Details Disclosure Element

Demo Download

Create a smoothly collapsible accordion using JavaScript, CSS3 animations, and <details> and <summary> elements.


8. Flexbox Based Vertical Accordion With Pure CSS

Flexbox Based Vertical Accordion With Pure CSS

Demo Download

A smooth, responsive, vertical accordion UI that expands the current accordion panel on mouse hover, built using pure CSS and flexbox model.


9. Fancy Accordion Slider With Pure CSS

Fancy Accordion Slider With Pure CSS

Demo Download

A pure CSS/CSS3 accordion slider that you are able to expand the desired slide into full size on mouse hover or touch tap. Responsive layout based on CSS3 flexbox model. Currently comes with 5 fancy transition effects.


10. Responsive Tabs/Accordion In Vanilla JavaScript

Responsive Tabs/Accordion In Vanilla JavaScript

Demo Download

A native JavaScript plugin to generate mobile-friendly horizontal or vertical tabs from unordered HTML lists.


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: