JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

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

<p class="target-1">Target 1</p>
<p class="target-2">Target 2</p>
<p class="target-3" style="display:none;">Target 3 - Hidden on start</p>

JavaScript

var f = function(e) {
	var el = e.target;
	var s = el.classList.contains('selectable');
	var x = el.classList.contains('selected');
	var tgl = el.getAttribute('data-toggle');
	var tgt = el.getAttribute('data-target');
	
	if (s) { el.classList.toggle('selected'); }
	
	if (tgl == 'display') {
		var t = document.querySelectorAll(tgt);
		
		for (i = 0; i < t.length; i++) {
			var d = getComputedStyle(t[i]).display;

			if (d == 'none') {
				t[i].style.display = 'block';
			} else {
				t[i].style.display = 'none';
			}
		}
	}
};

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