JSFiddle - React, Tailwind, and code Playground
HTML
<button class="toggle-feature" data-toggle="random-modal">
<span>Instrusive child</span><br>
<span>More intrusive child</span><br>
<span>Additional intrusive child</span><br>
</button>
<div id="random-modal">
Some modal
</div>
CSS
#random-modal.active{
color: red;
background: blue;
}
JavaScript
"use strict";
// globals
var regex;
// functionality
function toggleModal(clicked, parent){
var elem = (parent == undefined ? clicked : parent);
if(elem.hasAttribute("data-toggle")){
var modal = document.getElementById(elem.getAttribute("data-toggle"));
regex = new RegExp("(?:^|\\s)" + (elem.hasAttribute("data-class") ? elem.getAttribute("data-class") : "active") + "(?!\\S)");
if(modal.className.match(regex)){
modal.className = modal.className.replace(regex, "");
} else {
modal.className = modal.className + " " + (elem.hasAttribute("data-class") ? elem.getAttribute("data-class") : "active");
}
} else if(elem.hasAttribute("data-open")){
var modal = document.getElementById(elem.getAttribute("data-open"));
regex = new RegExp("(?:^|\\s)" + (elem.hasAttribute("data-class") ? elem.getAttribute("data-class") : "active") + "(?!\\S)");
if(!modal.className.match(regex)){
modal.className = modal.className + " " + (elem.hasAttribute("data-class") ? elem.getAttribute("data-class") : "active");
}
} else if(elem.hasAttribute("data-close")){
var modal = document.getElementById(elem.getAttribute("data-close"));
regex = new RegExp("(?:^|\\s)" + (elem.hasAttribute("data-class") ? elem.getAttribute("data-class") : "active") + "(?!\\S)");
if(modal.className.match(regex)){
modal.className = modal.className.replace(regex, "");
}
}
}
document.onclick = function(e){
var tf = document.getElementsByClassName("toggle-feature");
for(var i = 0; i < tf.length; i++){
if(e.target == tf[i]){
toggleModal(tf[i]);
} else {
for(var x = 0; x < tf[i].children.length; x++){
if(e.target == tf[i].children[x]){
toggleModal(tf[i].children[x], tf[i]);
}
}
}
}
}