JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<button data-toggle=".tab-1">Button</button>
<button data-toggle=".tab-2">Button</button>
<button data-toggle=".tab-3">Button</button>

<p class="tab tab-1">Target 1</p>
<p class="tab tab-2">Target 2</p>
<p class="tab tab-3">Target 3</p>

CSS

/* .tab { display: none; } */

JavaScript

var f = function(e) {
	var e = e.target;
	// var t = e.classList.contains('tab');
	var a = e.getAttribute('data-toggle');
	var q = document.querySelectorAll(a);
	var t = document.querySelectorAll('.tab');
	
	for (i = 0; i < t.length; i++) {
		t[i].style.display = 'none';
		// q[i].style.display = 'block';
	}
	
	for (i = 0; i < q.length; i++) {
		q[i].style.display = 'block';
	}
};

document.addEventListener('click', f, false);