More Developer Tools
An online tool for designing css buttons.
Create harmonious color schemes.
CSS Accordion Slider Generator
Create fully responsive, css only accordion sliders
Vertical accordion slider
Horizontal accordion slider
About the generator & FAQ
About the generator
- 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
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.