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");
}

respondToVisibility = function(element, callback) {
  var options = {
    root: document.documentElement
  }

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      callback(entry.intersectionRatio > 0);
    });
  }, options);

  observer.observe(element);
}

respondToVisibility(document.getElementById("myElement"), visible => {
	const feedbackEl = document.getElementById("visibilityFeedback");
  if(visible) {
  	feedbackEl.innerText = "Visible!";
   }
   else {
   	feedbackEl.innerText = "Not Visible";
   }
});