10 Best Accordion Sliders In JavaScript Or Pure CSS (2023 Update)
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.
Originally Published Oct 29 2019, updated Mar 03 2023
Table of contents:
JavaScript (jQuery) Accordion Sliders:
Simple Accordion Plugin For jQuery - zAccordion
A simple and use-to-use Accordion Plugin built with jQuery that allows you to implement horizontal accordion effects into your websites.
Feature-rich Accordion Slider In jQuery
A jQuery plugin that helps you create responsive, touch-friendly, retina-ready accordion sliders for presenting anything on the page.
jQuery Carousel Plugin with Accordion Behavior - Accarousel
A jQuery plugin used to create a smooth, expandable carousel from a list of images. When you click on a thumbnail, it zooms out to the overall carousel size to display the original version of the image like an accordion.
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 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.
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 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.
Flexbox Based Vertical Accordion With Pure CSS
A smooth, responsive, vertical accordion UI that expands the current accordion panel on mouse hover, built using pure CSS and flexbox model.
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.
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.
Conclusion:
Looking for more jQuery plugins or JavaScript libraries to create awesome Accordion Slider on the web & mobile? See jQuery Accordion Slider and CSS Accordion Slider sections for more details.
See also:
- Best Accordion Components In Pure JavaScript & CSS
- Best Accordion Menus In JavaScript Or Pure CSS
- Best Carousel Plugins
