JSFiddle - React, Tailwind, and code Playground
HTML
<div class="hide initial border">
Boo!
</div>
<span class="hide initial border">
Booya!
</span>
<button type="button" id="hide">
Drop hide
</button>
<button type="button" id="initial">
Drop important
</button>
CSS
.border {
border: 1px solid red;
}
.initial {
display: initial;
}
.hide {
display: none !important;
}
JavaScript
[].slice.call(document.querySelectorAll('button')).forEach(function(el) {
el.addEventListener('click', function() {
var className = el.id;
[].slice.call(document.querySelectorAll('.' + className)).forEach(function(el) {
el.classList.remove(className);
});
});
});