Top 10 JavaScript & CSS Accordion Components Of 2017

Here is a constantly updated list of the 10 best JavaScript and CSS based Accordion components/widgets we published on CSSScript.com. I hope you like it and don’t forget to spread the world.

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


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


8. Accordion Style Content Slider with CSS3 Flex and Transition

Accordion Style Content Slider with CSS3 Flex and Transition

Demo Download

An accordion style smooth content slider created by dp_lewis that allows you to expand the current slide with a smooth sliding animation when hover over, built with CSS3 flex and transition properties.


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


6. Super Smooth Accordion with Pure CSS / CSS3

super-smooth-accordion-with-pure-css-css3

Demo Download

A CSS only super smooth accordion component based on CSS3 transitions and :hoverselector. Without any dependencies like jQuery.


5. Creating A Stylish Accordion Menu with Pure CSS

Creating A Stylish Accordion Menu with Pure CSS

Demo Download

In this post we’re going to creating a stylish accordion menu that allows you to toggle hidden panels by clicking the title bar.


4. Simple Accordion Menu with CSS3 Transitions

Simple Accordion Menu with CSS3 Transitions

Demo Download

A simple accordion navigation menu built with only CSS and animated by CSS3 transitions.


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.


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


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.