Introduction

Accordions are useful when you want to toggle between hiding and showing large amount of content.

Stylizer offers you a responsive Accordion with many features, you can add a Image and videos and many items to it.

Example

This simple example show you a Stylizer Accordion with a text and image.

Code

Add the folowing code to your page html, the accordion it's responsive inside and beside a container.

<div class="tabs">
 <input type="radio" name="tabs" id="tabone" checked="checked">
  <label for="tabone">Tab One</label>
   <div class="tab">
      <!-- Contain content of the first tab -->
   </div>
 <input type="radio" name="tabs" id="tabtwo" checked="checked">
  <label for="tabtwo">Tab One</label>
   <div class="tab">
      <!-- Contain content of the second tab -->
   </div>
 <input type="radio" name="tabs" id="tabthree" checked="checked">
  <label for="tabthree">Tab One</label>
   <div class="tab">
      <!-- Contain content of the third tab -->
   </div>    
</div>                   
    

SCSS

// ---------------------------------------------------------------
// This file contains all styles related to the accordion component.
// ---------------------------------------------------------------


 // Setup the tabs class with flex

 .tabs {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  // make sure it wraps
  label {
    order: 1;
    // Put the labels first
    display: block;
    padding: 1rem 1rem;
    margin-right: 0.2rem;
    cursor: pointer;
    background: #dfe6e9;
    transition: background ease 0.5s;
    font-size: 18px;
    border-bottom: 1px solid #ffffff;
  }
  .tab {
    order: 99;
    // Put the tabs last
    flex-grow: 1;
    width: 100%;
    display: none;
    padding: 1rem;
    background: #f7f8f9;
  }
  input[type="radio"] {
    display: none;
    &:checked + label {
      border-bottom: 1px solid #7f8c8d;
      background: #fff;
      + .tab {
        display: block;
        border-bottom: 1px solid #7f8c8d;
      }
    }
  }
}

/*
** For responsive accordion
*/

@media (max-width: 45em) {
  .tabs {
    .tab {
      order: initial;
    }
    label {
      order: initial;
      width: 100%;
      margin-right: 0;
      margin-top: 0.2rem;
    }
  }
}