Read More V2

Pure CSS (lists)

HTML

<div class="page-class">
  <div class="list-items">
    <input type="checkbox" id="read_more" class="toggle" role="button">
    <label for="read_more" onclick="">
      <span class="more">More</span>
      <span class="less">Less</span>
    </label>

    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>

    <!-- Hidden -->
    <ul>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
    </ul>
    <ul>
      <li>item 9</li>
      <li>item 10</li>
      <li>item 11</li>
      <li>item 12</li>
    </ul>
    <ul>
      <li>item 13</li>
      <li>item 14</li>
      <li>item 15</li>
      <li>item 16</li>
    </ul>
  </div>
</div>

CSS

.page-class {
  position: relative;
  *zoom: 1;
}

ul {
  -webkit-transition: 1s linear;
     -moz-transition: 1s linear;
       -o-transition: 1s linear;
          transition: 1s linear;
    display: none;
    visibility: hidden;
}

  ul:first-of-type {
    display: block;
    visibility: visible;
  }
  

label {
   display: block;
   float: left;
   width: 100%;
   text-align: center;
   padding: 10px;
   box-sizing: border-box;
   cursor: pointer
}

  label:hover {
    background: #9cccfe;
    color: #fff;
  }

  label .less {
    display: none;
    visibility: hidden;
  }

.toggle {
  display: none
}
  .toggle:checked ~ ul {
    display: block;
    visibility: visible;
  }

  .toggle:checked ~ label .more {
    display: none;
    visibility: hidden;
  }

  .toggle:checked ~ label .less {
    display: block;
    visibility: visible;
  }

JavaScript

//NO JS