Accordion Pure CSS

by Elijah Tate

HTML

<ul id="accordion">
  <li>
    <label for="section-1-checkbox">Section 1</label>
    <input id="section-1-checkbox" type="radio" name="accordion-level-1" />
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </li>
  <li>
    <label for="section-2-checkbox">Section 2</label>
    <input id="section-2-checkbox" type="radio" name="accordion-level-1" />
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </li>
  <li>
    <label for="section-3-checkbox">Section 3</label>
    <input id="section-3-checkbox" type="radio" name="accordion-level-1" />
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </li>
  <li>
    <label for="section-4-checkbox">Section 4</label>
    <input id="section-4-checkbox" type="radio" name="accordion-level-1" />
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </li>
</ul>

CSS

#accordion input:not(:checked) + div {
      display: none;
    }
    
    #accordion input:checked + div {
      display: block;
    }
    
    #accordion input {
      width: 0px;
      height: 0px;
      margin: 0px;
      opacity: 0.0;
    }
    
    #accordion label {
      cursor: pointer;
      display: inline-block;
      width: 200px;
      background: gray;
      border: 1px solid black;
      padding: 15px 20px;
    }
    
    #accordion div {
      width: 200px;
      background: white;
      border: 1px solid gray;
      padding: 15px 20px;
    }
    
    #accordion li {
      list-style: none;
    }