<input type="checkbox" id="input" />
<label for="input" style="user-select: none">click me</label>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ut labore voluptatem ipsa vel tenetur
  obcaecati, sint sit nostrum saepe! Hic debitis voluptatum quas earum quam fugiat expedita blanditiis
  similique.
</p>
input[type="checkbox"] {
  & ~ p {
    display: none;
    transition: all 0.7s;
  }
  &:checked ~ p {
    display: block;
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.