JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="bio">
  <div class="limit">
  test Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa officia et, rerum sit quos fugit veritatis! Tempora sint quidem alias quo atque, dolorum, architecto minus deleniti! Consectetur quas similique, repudiandae.
  </div>
  <label class="toggle">
    Show    
    <input type="checkbox">
  </label>
</div>

CSS

.bio {
  input {
    position: absolute;
    left: -9999px;
    opacity: 0;
    width: 0px;
    height: 0px;
  }
  
  .toggle::after {
    content:' More';
  }

  .limit {
    max-height: 20px;
    overflow: hidden;
  }

  &:has(input:checked) .limit {
    max-height: none;
  }
  
  &:has(input:checked) .toggle::after {
    content:' Less';
  }

  &:has(input:focus) .toggle {
    border: 2px solid blue;
  }
}