<div class="accordion">
    <div class="accordion--content">
      <input id="accordion--content__one" class="accordion--content--toggle" type="radio" name="accordion" checked>
      <label for="accordion--content__one" class="accordion--content--toggle--text">One</label>
      <div class="accordion--content--body">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis, illo incidunt. Veniam, perferendis deleniti, itaque eligendi non ducimus animi quisquam velit odit tempore error. Explicabo unde laborum eos tenetur alias.
      </div>
    </div>
    <div class="accordion--content">
      <input id="accordion--content__two" class="accordion--content--toggle" type="radio" name="accordion">
      <label for="accordion--content__two" class="accordion--content--toggle--text">Two</label>
      <div class="accordion--content--body">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, doloremque possimus velit temporibus nulla ex saepe harum sint enim aperiam iste accusamus placeat excepturi? Aut animi cupiditate possimus atque nulla.
      </div>
    </div>
    <div class="accordion--content">
      <input id="accordion--content__three" class="accordion--content--toggle" type="radio" name="accordion">
      <label for="accordion--content__three" class="accordion--content--toggle--text">Three</label>
      <div class="accordion--content--body">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi iste alias doloribus explicabo illum autem corporis atque eius, asperiores porro eligendi quos dolore, ipsum fuga dolorem fugiat deserunt laudantium ut.
      </div>
    </div>
  </div>
  .accordion--content {
      /* each tab */
      display: block;
    }
    .accordion--content--toggle,
    .accordion--content--body {
      /* content body and checkbox */
      display: none;
    }
.accordion--content--toggle:checked ~ .accordion--content--toggle--text {
      /* active tab title */
      color: #000;
      background-color: #ccc;
      border: none;
    }
    .accordion--content--toggle:checked ~ .accordion--content--body {
      /* active tab body */
      display: block;
      background-color: #ccc;
    }
    .accordion--content--toggle--text {
      /* tab title */
      display: block;
      background-color: #000;
      color: #fff;
      cursor: pointer;
      font-size: 25px;
      border-bottom: 1px solid #f5f5f5;
      user-select: none;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.