Reply To: jQuery read more / less toggle

[Mottie]

You can accomplish the same thing without using javascript…

http://codepen.io/Mottie/pen/bqLaJm

HTML template

<article>
  ....
  <input id="read-more-toggle-1" class="read-more-toggle" type="checkbox">
  < div class="read-more-content">
    ...
  < /div>
  <label class="read-more-toggle-label" for="read-more-toggle-1">Read </label>
</article>

Change the number in “read-more-toggle-1” if you add more than one “Read More” block

CSS

.read-more-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}
.read-more-toggle {
  display: none;
}
.read-more-toggle-label {
  display: inline-block;
  user-select: none;
  cursor: pointer;
  border: none;
  padding: 5px;
  margin: .5em;
  font-size: .8em;
  background: #555;
  color: white;
}
.read-more-toggle-label:after {
  content: "More";
  display: inline-block;
}
.read-more-toggle:checked + .read-more-content {
  display: block;
  /* css animation won't work with "auto"; set to some height larger
    than the content */
  max-height: 1000px;
}
.read-more-toggle:checked + .read-more-content + .read-more-toggle-label:after {
  content: "Less";
}