The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery read more / less toggle Reply To: jQuery read more / less toggle


You can accomplish the same thing without using javascript…

HTML template

  <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>

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


.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";