<p>Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
<div class="spoiler">
<span class="spoiler_title">Spoiler: </span>
    <input type="checkbox" id="item-1">
    <label for="item-1">Hint</label>
    <div class="content_box">
    <div class="content">
        <p>Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
        <br/>
        <p>Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
    </div>
    </div>
</div>
<p>Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
<div class="spoiler">
<span class="spoiler_title">Spoiler: </span>
    <input type="checkbox" id="item-2">
    <label for="item-2">Hint</label>
    <div class="content_box">
    <div class="content">
        <p>
        <img alt="Nam liber tempor cum" height="289" src="https://4.bp.blogspot.com/-qFt-0gmPIdM/UwRK11umvHI/AAAAAAAAbQw/Kn1DK2CgZ38/s1600/6.png" title="Nam liber tempor cum soluta nobis eleifend option" width="431"/>
        </p>
    </div>
    </div>
</div>
<p>Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
.spoiler .spoiler_title {
  display: inline;
  float: left;
  margin: -2px 10px 0 0;
  padding: 4px 0;
  font-size: 16px;
  line-height:1;
}
.spoiler label {
  cursor: pointer;
  background: #26272a;
  margin:0;
  padding:4px 18px 4px 22px;
  outline: none;
  border-radius: 3px;
  color: #efefef;
  transition: all .3s ease-in-out;
  display: inline;
  font-size: 12px;
  font-family: arial, san-serif;
  line-height:1;
  position: relative;
}
.spoiler input[type=checkbox] ~ label:before {
  content: "";
  height: 0;
  width: 0;
  border-width: 4px 4px 4px 7px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 7px;
  left: 8px;
}
.spoiler input[type=checkbox]:checked ~ label:before {
  content: "";
  height: 0;
  width: 0;
  border-width: 7px 4px 4px 4px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 8px;
  left: 8px;
}
.spoiler input {
  position:absolute;
  left:-999em;
  opacity: 0;
}
.spoiler .content_box{
  width:100%;
  border:1px solid #ddd;
  background: #efefef;
  height:auto;
  padding:6px 10px;
  margin:8px 0 0;
  overflow:hidden;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}
.spoiler .content_box .content {
  display: none;
}
.spoiler .content p {
  padding:0;
  margin:0
}
.spoiler .content p img {
  margin:4px 0 0;
  max-width: 100%;
  height: auto;
}
.spoiler input[type=checkbox]:checked ~ .content_box .content {
  display: block;
  -webkit-animation:slide-down .3s ease-out;
  -moz-animation:slide-down .3s ease-out;
}
@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}
100%{opacity:1;-moz-transform:translateY(0)}
}
 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.