JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<button class="selectable">Button</button>
<button class="selectable">Button</button>

<br><br><br><br>

<button class="selectable" data-zinc-toggle="display" data-zinc-target=".test-target">Button</button>
<button class="selectable" id="elem">Button</button>

<br><br><br><br>

<button class="selectable" data-example="test">Button</button>

<br><br><br><br>

<p class="test-target">Test target</p>

CSS

.hide {
	display: none;
}

JavaScript

var fn = function(e) {
    var el = e.target;
	
	if (el.classList.contains('selectable')) {
        el.classList.toggle('selected');
    }
	
	if (el.classList.contains('selected') && el.getAttribute('data-zinc-toggle') == 'display') {
		var t = document.querySelectorAll(el.getAttribute('data-zinc-target'));
		
		for (var i = 0; i < t.length; i++) {
			t[i].style.display = 'none';
		}
	}
};

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