10 Best Accordion Sliders In JavaScript Or Pure CSS

by jQueryScript,

What Is Accordion Slider?

Accordion Slider is a kind of slider design pattern that enables the user to expand/collapse slides just like an accordion. 

How Accordion Slider Works?

An Accordion Slider collapses slides into an accordion-style interface where the user can reveal the full content of a slide by clicking or hovering the accordion header.

The Best Accordion Slider

Here is a list of 10 best JavaScript & Pure CSS solutions that help you create elegant, user-friendly accordion sliders to present your designs & works on the web app. I hope you like it.

Table of contents:

JavaScript (jQuery) Accordion Sliders:

Responsive Accordion Slider With jQuery And CSS3

A fancy, responsive, animated, hover-triggered accordion slider built with jQuery, JavaScript, CSS flexbox and CSS3 animations.

Responsive Accordion Slider With jQuery And CSS3

[Demo] [Download]


Responsive Diagonal Slider Plugin With jQuery And CSS3 - Skewed Slider

A jQuery and CSS3 powered responsive, skewed accordion slider that enables the user to expand each image on mouse hover.

Responsive Diagonal Slider Plugin With jQuery And CSS3 - Skewed Slider

[Demo] [Download]


jQuery Skewed Accordion Slider Plugin - Diagonal Slider

Diagonal Slider is a small jQuery plugin to create a full window diagonal image slider that auto expands/collapses on mouse hover like an accordion control.

jQuery Skewed Accordion Slider Plugin - Diagonal Slider

[Demo] [Download]


Accordion Style Collapsing Carousel Plugin With jQuery - Colcarou

A jQuery plugin for generating an accordion style collapsing carousel where the slides will expand into full view when you click on the vertical title labels.

Accordion Style Collapsing Carousel Plugin With jQuery - Colcarou

[Demo] [Download]


Small Background Accordion Slider With jQuery - fsbanner

fsbanner is a very small jQuery plugin used for creating an accordion-style background image slider that supports both click and hover events.

Small Background Accordion Slider With jQuery - fsbanner

[Demo] [Download]


Horizontal Stacked Accordion Slider With jQuery And CSS3 - cascadingDivs

cascadingDivs is a jQuery accordion plugin which makes use of CSS3 transitions to slide between a group of stacked elements just like a horizontal slider.

Horizontal Stacked Accordion Slider With jQuery And CSS3 - cascadingDivs

[Demo] [Download]


Pure CSS Accordion Sliders:

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.

Pure CSS Responsive Horizontal Accordion

[Demo] [Download]


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.

Pure CSS Horizontal Responsive Image Accordion Slider

[Demo] [Download]


Accordion Style Content Slider with CSS3 Flex and Transition

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.

Accordion Style Content Slider with CSS3 Flex and Transition

[Demo] [Download]


Fancy Accordion Slider With Pure CSS

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.

Fancy Accordion Slider With Pure CSS

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Accordion Slider on the web & mobile? Check out the jQuery Accordion Slider and CSS Accordion Slider sections.