A pure CSS collapsible widget from Alligator.io

<!-- Wrapper for a collapsible widget -->
<div class="wrap-collapsible">
  <!-- 
    Use a checkbox input to handle a click event.

    The checkbox will be invisible 
    and its label will be used instead to check or uncheck it.

    We'll use the CSS :checked pseudo-selector to style things differently 
    when the hidden checkbox is checked.
  -->
  <input id="collapsible" class="toggle" type="checkbox" />

  <!-- 
    Note that each label should be associated with the correct checkbox.
    So each checkbox element needs a unique id and 
    each label's for attribute should point to the corresponding checkbox's id.
  -->
  <label for="collapsible" class="lbl-toggle">More Info</label>

  <!-- Detail content for the collapsible widget -->
  <div class="collapsible-content">
    <div class="content-inner">
      <p>
        Bacon ipsum dolor amet pork belly capicola ground round brisket. Shank
        pork belly cupim fatback. Flank porchetta chicken spare ribs. Ham
        prosciutto pork belly turkey beef picanha strip steak swine alcatra.
      </p>
    </div>
  </div>
</div>

.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

/* 
* First we set the checkbox element to display: none. 
* Because it will be invisible.
*/
input[type='checkbox'] {
  display: none;
}

/* Style the label as a button */
.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  color: #a77b0e;
  background: #fae042;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.25s ease-out;
}

/* Style the label when user hovers it */
.lbl-toggle:hover {
  color: #7c5a0b;
}

/* Implement a right angle icon */
.lbl-toggle::before {
  content: ' ';
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: 0.7rem;
  transform: translateY(-2px);
  transition: transform 0.2s ease-out;
}

/* Rotate the right angle icon when the checkbox input is checked */
.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

/* First, set max-height for the collapsible content is 0px to hide it */
.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.25s ease-in-out;
}

/* When the input is checked, set the max-height is 350px to show it */
.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 350px;
}

/* Style the checkbox input when it is checked */
.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
  background: rgba(250, 224, 66, 0.2);
  border-bottom: 1px solid rgba(250, 224, 66, 0.45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: 0.5rem 1rem;
}