Settings

Number of decks:
Title width: px
Title height: px
Title font size: px
Content padding: px
Content height: px
Border radius: px
Border size: px

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

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

How to create a responsive accordion slider?

Which properties are available for editing?

You can modify following properties:

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.