JSFiddle - React, Tailwind, and code Playground

by efreeman79

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>
  Toggle
</button>
<ul>
  <li class="odd">Lorem</li>
  <li class="even">Ipsum</li>
  <li class="odd">Lorem</li>
  <li class="even">Ipsum</li>
</ul>

SCSS

ul {
  width: 320px;
  height: auto;
  margin: 0 auto;
  max-height: 0;
  transition: max-height .75s ease-in-out;
  overflow: hidden;
}
li {
  width: 100%;
  height: 50px;
//  background: #2c3e50;
background: #e74c3c;
  color: #fff;
  text-align: center;
  list-style: none;
  vertical-align: center;
  line-height: 3;
  transition: transform .75s ease-in-out, margin .75s ease-in-out, background .75s ease-in-out;
}
button.active + ul {
  max-height: 200px;
}
button.active + ul > li {
  transform: perspective(320px) rotateX(0deg);
  background: #e74c3c;
  margin: 0;
}
li.odd {
  transform: perspective(320px) rotateX(-90deg);
  transform-origin: top;
  margin-bottom: -100px;
}
li.even {
  border-top: 1px dashed #bf2718;
  transform: perspective(320px) rotateX(90deg);
  transform-origin: bottom;
  margin-top: -100px;
}

li:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	opacity: 1;
	transition: all 0.75s ease;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -moz-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.active li:before {
	opacity: 0;
}

li.even:before {
	transform: rotate(180deg);
}

JavaScript

$('button').on('click', function() {
  $(this).toggleClass('active');
  $('ul').toggleClass('active');
});