Accordion Pure CSS

by humanzing

HTML

<ul class="accordion">
    <li onmouseup="growDiv(this)">
        <label for="section-1-checkbox">Section 1</label>
        <input id="section-1-checkbox" type="checkbox" name="accordion-level-1" />
        <div class="warp">
            <div>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            </div>
        </div>
    </li>
    <li onmouseup="growDiv(this)">
        <label for="section-2-checkbox">Section 2</label>
        <input id="section-2-checkbox" type="checkbox" name="accordion-level-1" />
        <div class="warp">
            <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            </div>
        </div>
    </li>
    <li onmouseup="growDiv(this)">
        <label for="section-3-checkbox">Section 3</label>
        <input id="section-3-checkbox" type="checkbox" name="accordion-level-1" />
        <div class="warp">
            <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            </div>
        </div>
    </li>
    <li onmouseup="growDiv(this)">
        <label for="section-4-checkbox">Section 4</label>
        <input id="section-4-checkbox" type="checkbox" name="accordion-level-1" />
        <div class="warp">
            <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
       ...

CSS

body {
      margin:0;
      padding:0;
    }
    .accordion input:not(:checked) + div {
      height: 0px;
    }
    
    .accordion input:checked + div {
      height: 0;
    }
    
    .accordion input {
      width: 0px;
      height: 0px;
      margin: 0px;
      opacity: 0.0;
    }
    
    .accordion > li > label {
      cursor: pointer;
      width: 100%;
      color: #999;
      padding: 15px 0 0px 20px;
      display: block;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
      .accordion li:first-child {
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
      -moz-border-radius-topleft: 5px;
      -moz-border-radius-topright: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
     .accordion li:last-child {
      -webkit-border-bottom-right-radius: 5px;
      -webkit-border-bottom-left-radius: 5px;
      -moz-border-radius-bottomright: 5px;
      -moz-border-radius-bottomleft: 5px;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
      border:0;
    }
    
    .accordion > li > div {
      overflow-x: hidden;
      width: 100%;
      background: white;
      height:0px;
      -webkit-transition: height 0.3s ease-in;
      -moz-transition: height 0.3s ease-in;
      -ms-transition: height 0.3s ease-in;
      -o-transition: height 0.3s ease-in;
      transition: height 0.3s ease-in;
      background: white;
    }
    .accordion > li > div > div{
      max-height: 200px;
      


    }
    .accordion > li > div > div > a{
      display: block;
      padding:5px 15px;

    }
    .accordion > li > div > div > label{
            padding: 0 0 0px 0;

    }
    .accordion > li {
      list-style: none;
      background-color: #333;
      border-bottom: 1px solid #1a1a1a;
      width: 100%;
      cursor: pointer;
     ...

JavaScript

function growDiv(a) {
  var el = document.querySelectorAll(".accordion li .warp");
  el.forEach(function(element) {
  	element.style.height = "0px";
  });
  var w = a.querySelector('.warp');
  var w2 = w.querySelector('div');
  w.style.height = w2.clientHeight + "px";
  return;
}