Top 10 JavaScript & CSS Accordion Components Of 2018

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

Smooth Vertical Accordion Panels with Pure JS and CSS3

Demo Download

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

Accordion-Module

Demo Download

A lightweight, standalone vanilla JavaScript library for creating a vertical accordion UI for your web application.


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


4. Badger Accordion

Smooth Accessible Accordion Plugin In Pure JavaScript – Badger Accordion

Demo Download

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

Minimalist Accordion Plugin For Vanilla JavaScript

Demo Download

A dead simple accordion plugin written in pure vanilla JavaScript that allows you to toggle the visibility of content panels on click.


6. Houdini

Basic Accordion & Content Toggle JS Library – Houdini

Demo Download

Houdini is a vanilla JavaScript plugin allows to toggle the visibility of block content with URL hashtag (deep link) support.


7. handy-collapse.js

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

Demo Download

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

Accessible Accordion Component For JavaScript – A11Y Accordion

Demo Download

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

Modern Smooth Accordion In Pure JavaScript – accordion-init

Demo Download

Just another PURE JavaScript solution to create a modern, smooth-sliding accordion component for your FAQ system.


10. collapsible.js

Smooth Content Toggle Plugin In Pure JavaScript – collapsible.js

Demo Download

collapsible.js is a dependency-free content toggle JavaScript plugin to smoothly collapse & expand content panels just like Accordion.