CSS Accordion Slider Generator

Create fully responsive, css only accordion sliders

Vertical accordion slider

Horizontal accordion slider

How it works?

Play the css settings, change colors, deck count, slider dimensions etc.
When you are happy with the final result, you can either download this preview as an HTML file or directly copy generated CSS and HTML codes on the right hand side.
The generated accordion slider is pure CSS and HTML and there is no JavaScript.
The slider can be used as a gallery, product tour, portfolio showcase, content slider etc.
This is a free tool and all the code you generate can be used without any license issues.

Title

Content

Title

Content

About the generator & FAQ

About the generator

This tool is a free online generator that allows you to create a cross browser css only (no javascript) responsive "Accordion Slider" in seconds.

Features

CSS only, you don't need to write a single line of javascript code
Fully responsive and touch friendly
You can create both vertical and horizontal sliders
15 color themes
Smooth transition effect between decks
Any HTML content can be used as a deck content

How to create a responsive accordion slider?

Select accordion type (horizontal or vertical) by using corresponding buttons
Add a class name to increase the specificity of generated CSS code. By this way, you can use multiple accordion sliders having different designs on the same page
Select a color theme or use color boxes to change the colors of different parts of accordion
Use sliders to add new decks or change the dimensions
After completing your design, open the "Get CSS Code" or "Get HTML Code" decks on the preview accordion
Click "Select All" button and hit CTRL+C to copy the generated code to your clipboard

Which properties are available for editing?

You can modify following properties:

Border color, size and radius of accordion
Title background color
Title font color and size
Title hover/selected status background color
Content text and background color
Content size
Slider deck count

In addition to this properties, you can also change accordion's class name.

Which browsers do you support?

The generated code will include vendor prefixes for following browsers; Google Chrome, Firefox, Safari, Opera and Internet Explorer.

Can I use the slider with Bootstrap

Actually with this slider, you don't even need to use Bootstrap's built-in accordion slider. As you already noticed, the sliders don't require javascript code to run.

On Smashing Magazine, there is a really well written article about designing accordion sliders. You can check it out to get an idea of different concepts and use cases of accordion sliders.