Pure CSS Accordion

<section class="accordion">
  <div class="tab">
    
    <label for="cb1" class="tab__label">Checkbox</label>
    <div class="tab__content">
      <p>Pure CSS accordion based on the "input:checked + label" style trick.</p>
    </div>
  </div>
  <div class="tab">
    
    <label for="cb2" class="tab__label">Open multiple</label>
    <div class="tab__content">
      <p>Using <code>&lt;input type="checkbox"&gt;</code> allows to have several tabs open at the same time.</p>
    </div>
  </div>
</section>

<section class="accordion accordion--radio">
  <div class="tab">
    
    <label for="rd1" class="tab__label">Radio</label>
    <div class="tab__content">
      <p>If you want to have only one tab open, you can use <code>&lt;input type="radio"&gt;</code>.</p>
    </div>
  </div>
  <div class="tab">
    
    <label for="rd2" class="tab__label">Open single</label>
    <div class="tab__content">
      <p>But if you wanna close the opened tab, you must add a "close" button somewhere, like the one below, that is just another styled radio input.</p>
    </div>
  </div>
  <div class="tab">
    
    <label for="rd3" class="tab__close">Close open tab &times;</label>
  </div>
</section>