JSFiddle - React, Tailwind, and code Playground

by elmarj

HTML

<button id="button" onclick="toggleVisibility()">
make text visible
</button>

<p>
  <span id="visibilityFeedback"></span>
</p>

<p>
  <span id="myElement">This is the hidden text</span>
</p>

CSS

.hidden {
  display: none;
}

#visibilityFeedback {
  color: red;
}

JavaScript

toggleVisibility = function() {
  const myElement = document.getElementById("myElement");
  myElement.classList.toggle("hidden");
}

var targetNode = document.getElementById('myElement');
var observer = new MutationObserver(function(){
		// BUG: this code is never called
    if(targetNode.style.display != 'none'){
  		feedbackEl.innerText = "Visible!";
    }
    else 
    {
      feedbackEl.innerText = "Not Visible";
    }
});
observer.observe(targetNode, { attributes: true, childList: true });