JSFiddle - React, Tailwind, and code Playground

by cferdinandi

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!
</div>

CSS

.toggle-content {
	display: none;
}

.toggle-content.is-visible {
	display: block;
}

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);