JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#block-1" class="btn" data-js="hide-reveal">Block 1</a>
<a href="#block-2" class="btn" data-js="hide-reveal">Block 2</a>

<div class="content-block" id="block-1">
	<h2>Lorem ipsum dolor sit amet, consectetur.</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ullam hic, eius placeat unde quod doloribus vel, ad eveniet et rem nulla consequuntur dolores impedit repellat minus expedita est corporis.</p>
</div>

<div class="content-block" id="block-2">
	<h2>Aliquam ullam hic, eius placeat.</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum obcaecati, similique. Consequuntur nulla omnis hic dolore rem reprehenderit harum delectus unde expedita velit, laborum, ullam rerum inventore cupiditate. Omnis, dolorem.</p>
</div>

CSS

body {
	font: 400 16px/1.5 "Source Sans Pro", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
	margin: 2rem;
}

.btn {
	display: inline-block;
	transition: .25s ease;
	padding: .5em 2em;
	background: lightcoral;
	color: #fff;
	text-decoration: none;
	outline: 0;
	border-radius: .15em;
	border-bottom: 2px solid #c24a3e;
	text-shadow: 0 1px 0 #c24a3e; 
}

.btn:hover {
	background: #cf574b;
	border-color: #9e2d22;
	text-shadow: 0 1px 0 #9e2d22;
}

.btn:active {
	background: #b03c30;
	border-color: #851c11;
	text-shadow: 0 1px 0 #851c11;
}

.content-block {
	background: #fff;
	padding: 2rem;
	margin-top: 2rem;
	border-radius: .15em;
	border-bottom: 2px solid #ddd;
	transition: .25s ease;
	max-height: 0;
	opacity: 0;
	transform: translateY(-50%);
	visibility: hidden;
}

.content-block.-active {
	max-height: 100rem;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.content-block h2 {
	margin-top: 0;
	font-weight: 200;
	text-transform: lowercase;
	font-size: 2rem;
}

JavaScript

const hideReveal = document.querySelectorAll('[data-js="hide-reveal"]')

hideReveal.forEach(item => {
	const target = document.querySelector(item.getAttribute('href'))
	const closeDelay = 2000
	const classActive = '-active'
	let timeout = null
	let alreadyOpen = false

	// On button click
	item.addEventListener('click', event => {
		event.preventDefault()

		// Apply active class to target
		target.classList.add(classActive)

		// Set a delay to remove active class, or close it again if clicked again
		if (alreadyOpen) {
			target.classList.remove(classActive)
			clearTimeout(timeout)
			alreadyOpen = false
		}
		else {
			alreadyOpen = true
			timeout = setTimeout(() => {
				target.classList.remove(classActive)
				alreadyOpen = false
			}, closeDelay)
		}
	})
})