JSFiddle - React, Tailwind, and code Playground

by kingliam

HTML

<input type="checkbox" class="expander" onClick="expandDiv()"> Expands
<div class='wrapper'>
  <div class="fold-wrapper">
    <div class="top-fold"></div>
    <div class="bottom-fold"></div>  
  </div>
  
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  </p>
</div>

CSS

.wrapper {
  position: relative;
  transition: height 800ms;
  height: 0;
  border: solid #ccc;
  border-width: 2px 0;
  padding: 0 25px;
  color: white;
  overflow: hidden;
  box-shadow: inset 0 0 12px 0px rgba(0, 0, 0, 0.25);
}

p {
  padding: 20px;
}

.top-fold, .bottom-fold {
  height: 50%;
  width: calc(100% - 50px);
  position: absolute;
  z-index: -1;
}

.fold-wrapper {
  /* box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.35); */;
  width: 100%;
  height: 100%;
}

.animate .fold-wrapper {
  /* animation: foldwrapper 500ms linear 1; */
}

.animate .top-fold {
  top: 0;
  animation: rotatetop 500ms linear 1;
  transform-style: preserve-3d;
  background-color: #ccc;
}

.animate .bottom-fold {
  bottom: 0;
  animation: rotatebottom 500ms linear 1;
  transform-style: preserve-3d;
  background-color: #bbb;
}


/* @keyframes rotatetop {
 0% { transform: perspective(125px) skewX(80deg) }
  100% { transform: perspective(125px) skewX(0) }
}
@keyframes rotatebottom {
  0% { transform: perspective(125px) skewX(90deg); }
  100% { transform: perspective(125px) skewX(180deg); }
} */


@keyframes rotatetop {
  0% { transform: perspective(125px) rotateX(90deg) skewX(90deg); top: -10px; }
  100% { transform: perspective(125px) rotateX(180deg) skewX(0); top: 0; }
}
@keyframes rotatebottom {
  0% { transform: perspective(125px) rotateX(90deg) skew(90deg); bottom: 50% }
  100% { transform: perspective(125px) rotateX(0) skew(0); bottom: 0 }
}

@keyframes foldwrapper {
  0% { box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0); }
  99% { box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.35); }
}

JavaScript

function expandDiv() {
  var expander = document.querySelector('.expander');
  var wrapper = document.querySelector('.wrapper');
  
	if (expander.checked) {
    wrapper.classList.add("animate");
		wrapper.style.height = wrapper.scrollHeight + "px";  
    
  } else {
    wrapper.classList.remove("animate");
  	wrapper.style.height = 0;
  }
}