JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<p>
  <a class="toggle-dd" href="#example">Toggle Div</a>
</p>

<div class="toggle-content animate__animated animate__fadeIn" id="example">
  Here's some text we want to toggle visibility of. Let's do it!
</div>

JavaScript

var show = function (elem) {
	elem.style.display = 'block';
};

var hide = function (elem) {
	elem.style.display = 'none';
};

var toggleDD = function (elem) {

	// If the element is visible, hide it
	if (window.getComputedStyle(elem).display === 'block') {
		hide(elem);
		return;
	}

	// Otherwise, show it
	show(elem);

};

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

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

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

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

	// Toggle the content
	toggleDD(content);

}, false);