JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<button id="o">Slide 'em'</button>

<div class="expandable">
	<div class="slideme__content">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, ratione et autem totam atque cupiditate ab! Perferendis ut aliquid aspernatur explicabo distinctio, ipsa incidunt laudantium, pariatur consequatur, nisi tenetur earum?
	</div>
</div>

SCSS

body {
	font-family: sans-serif;
}

.expandable {
	background: #eee;
	display: block;
	height: 0;
	overflow: hidden;
	width: 300px;
}

.slideme__content {
	padding: 1rem;
}

JavaScript

(function() {
	let expandable = document.querySelector('.expandable')
	let content = expandable.querySelector('.slideme__content')
	let contentHeight = content.offsetHeight
	let startTime = null
	let duration = 300

	const animate = (time) => {
		startTime = startTime || time

		let delta = Math.min(1, (time - startTime) / duration)
		let curHeight = delta * contentHeight

		expandable.style.height = curHeight + 'px'

		if (curHeight >= contentHeight)
			expandable.style.height = 'auto'
		else
			requestAnimationFrame(animate)
	}

}())

o.addEventListener('click', function(){
	requestAnimationFrame(animate)
})