More Developer Tools
Create harmonious color schemes.
CSS Accordion Slider Generator
Create fully responsive, css only accordion sliders
Vertical accordion slider
Horizontal accordion slider
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.