Are you first timer at lazacode.org? Why not join us and start exchange your programming knowledge with everyone. Register today!

SCSS - 'read more' toggle classes

0 votes
5 views
added Jul 18 in SCSS by LC Marshal Lieutenant (12,590 points)
.read-more {
  &-state {
    display: none;
    &:checked ~ .read-more-wrap .read-more-target {
      opacity: 1;
      font-size: inherit;
      max-height: 999em;
    }
    &:checked ~ .read-more-trigger:before {
      content: 'Show less';
    } 
  }
  &-state ~ .read-more-trigger:before {
    content: 'Show more';
  }
  &-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .1s ease;
  }
  &-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
  }
}
<!--Toggle in HTML-->
<input type="checkbox" class="read-more-state" id="post-1" />
 
<p class="read-more-wrap">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore
    <span class="read-more-target"> eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem! Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!Libero fuga facilis
    </span>
</p>
 
<label for="post-1" class="read-more-trigger"></label>

Please log in or register to response this reference.

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...