JSFiddle - React, Tailwind, and code Playground

by OscarBeses

HTML

<p>
  <a class="toggle" href="#example">Toggle Div</a>
</p>

<div class="toggle-content" id="example">
  Here's some text we want to toggle visibility of. Let's do it! Let's also add some more content to make it longer and longer and longer and longer. The more content we have, the more impressive the animation will be (or at least, that's the hope!).
</div>

CSS

.toggle-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 10s ease-in-out;
}

.toggle-content.is-visible {
	max-height: 999em;
}

JavaScript

// Show an element
var show = function (elem) {
	elem.classList.add('is-visible');
};

// Hide an element
var hide = function (elem) {
	elem.classList.remove('is-visible');
};

// Toggle element visibility
var toggle = function (elem) {
	elem.classList.toggle('is-visible');
};

// Listen for click events
document.addEventListener('click', function (event) {

	// Make sure clicked element is our toggle
	if (!event.target.classList.contains('toggle')) return;

	// Prevent default link behavior
	event.preventDefault();

	// Get the content
	var content = document.querySelector(event.target.hash);
	if (!content) return;

	// Toggle the content
	toggle(content);

}, false);