JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="slider">After some tinkering, I really liked the cubic-bezier transition timing function above, though there may be a more scientific method for the animation.  At this point the only thing we need to do is toggle the closed class to slide the element in an out!</div>

<button>slide</button>

CSS

.slider {
	overflow-y: hidden;
	max-height: 500px; /* approximate max height */

	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slider.closed {
	max-height: 0;
}

JavaScript

$('button').click(function() {
    $('.slider').toggleClass('closed')
})