Accordion Slider

Accordion Slider is a free online generator that creates CSS only responsive accordion sliders without using javascript. This tool allows you to quickly design and customize accordion sliders for various web projects. Simply input your preferences, and the generator produces clean, efficient HTML and CSS code for your accordion slider, ready to be implemented on your website.

What is an accordion slider?

An accordion slider is a compact, interactive web element used for displaying content in a space-saving format. Key features of an accordion slider include:

  1. Vertical or horizontal layout of multiple panels or sections.
  2. Each panel typically contains an image and/or text.
  3. One panel is expanded or "open" at a time, showing its full content.
  4. Other panels are collapsed, usually showing only a title or preview.
  5. Users can click or tap on collapsed panels to expand them, simultaneously closing the previously open panel.
  6. Transitions between panel states are often animated for a smooth user experience.
Accordion sliders are particularly useful for: This type of slider combines the functionality of an accordion (expandable/collapsible sections) with the visual appeal of a slider, making it an effective tool for presenting content in a user-friendly and space-efficient way.

Is Accordion Slider Generator free?

Yes, the Accordion Slider Generator is completely free to use. This online tool allows users to create CSS only accordion sliders without any cost or subscription. You can generate as many accordion sliders as you need for your web projects without worrying about fees or licensing. The free nature of this tool makes it accessible to developers, designers, and website owners of all levels, from beginners to professionals.

Features

How can I create an accordion slider?

Which properties are available for editing?

You can modify following properties while creating your accordion sliders:

In addition to this properties, you can also change the class name which will be used in the HTML and CSS code.

More Tools 🚀

Settings

Number of decks: 3
Title width: 65px
Title height: 65px
Title font size: 15px
Content padding: 30px
Content height: 280px
Border radius: 8px
Border size: 1px

More Tools 🚀

Background Remover

Background Remover

Remove background from images for free 🙌

Color Converter

Color Converter

Convert hex, rgb, hsl, hsv and x11 color names

Be the first to know about new tools

By joining our newsletter, you agree to receive email updates from us.

Create 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
f12.io
About & FAQ
© 2024
    
<div class="accordion">
  <input type="radio" name="select" class="accordion-select" checked />
  <div class="accordion-title"><span>Title</span></div>
  <div class="accordion-content">Content</div> 
  <input type="radio" name="select" class="accordion-select" />
  <div class="accordion-title"><span>Title</span></div>
  <div class="accordion-content">Content</div> 
  <input type="radio" name="select" class="accordion-select" />
  <div class="accordion-title"><span>Title</span></div>
  <div class="accordion-content">Content</div> 
</div> 


 .accordion {
  box-sizing: border-box;
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  width: 100%;
}

.accordion-select {
  cursor: pointer;
  margin: 0;
  opacity: 0;
  z-index: 1;
}

.accordion-title {
  position: relative;
}

.accordion-title:not(:nth-last-child(2))::after {
  border: 1px solid transparent;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.accordion-title span {
  bottom: 0px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  white-space: nowrap;
  width: 100%;
}

.accordion-content {
  box-sizing: border-box;
  overflow: auto;
  position: relative;
  transition: margin 0.3s ease 0.1s;
}

.accordion-select:checked + .accordion-title + .accordion-content {
  margin-bottom: 0;
  margin-right: 0;
}

/* Generated styles starts here */ 

 .accordion {
    border-color: #dedede;
    border-radius: 8px;
    border-style: solid;
    border-width: 1px;
    flex-direction: column;
    height: auto;
} 

 .accordion-title,
.accordion-select  {
    background-color: #ffffff;
    color: #7f8787;
    width: 100%;
    height: 65px;
    font-size: 15px;
}

.accordion-select {
    margin-bottom: -65px;
    margin-right: 0;
}

.accordion-title:not(:nth-last-child(2))::after {
    border-bottom-color: rgb(234, 234, 234);
    border-right-color: transparent;
} 

 .accordion-select:hover + .accordion-title,
.accordion-select:checked + .accordion-title {
    background-color: #ffffff;
} 

 .accordion-title span  {	
    transform: rotate(0deg);
    -ms-writing-mode: lr-tb;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
    padding-left: 33px;
    padding-right: 33px;
    line-height: 65px;
} 

 .accordion-content {
    background-color: #f7f7f7;
    color: #7f8787;
    height: 280px;
    margin-bottom: -280px;
    margin-right: 0;
    padding: 30px;
    width: 100%;
}