JSFiddle - React, Tailwind, and code Playground

by alexchetv

HTML

<div class="collapse">

  <input id="big-text-collapse" type="checkbox">
  <label for="big-text-collapse">Big text</label>

  <div class="collapse__content">
    <strong>I'm always collapsible</strong>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat lectus mi, vel consectetur massa vulputate in. Donec vestibulum, dui non facilisis congue, ex nisi bibendum urna, in lacinia enim dolor sed risus. Nunc tristique malesuada mauris, at
      accumsan velit aliquam vitae. Sed ultricies risus sit amet velit consequat lacinia. Sed non ornare erat. Suspendisse convallis velit dapibus orci sollicitudin malesuada.
    </p>
  </div>

</div>

CSS

@charset "UTF-8";
.collapse > input[type="checkbox"] {
  display: none;
}

.collapse > input[type="checkbox"]:checked ~ label::after {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.collapse > input[type="checkbox"]:checked ~ .collapse__content {
  display: block;
  max-height:300px;
}

.collapse > label {
  /*display: block;*/
  padding: 8px;
  cursor: pointer;
  background-color: #ccc;
}

.collapse > label::after {
  content: '^';
  display: inline-block;
  margin-left: 4px;
  transition: all 0.5s ease-out;
}

.collapse__content {
  /*padding: 8px;
  display: none;*/
  max-height: 0;
  transition: all 0.5s ease-out;
  overflow-y: hidden;
}