JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<div id="container">  
  <button id="toggle">Toggle Fullscreen</button>
</div>

JavaScript

const button = document.getElementById('toggle');
const container = document.getElementById('container');

button.addEventListener("click", function() {
		if (document.fullscreenElement) {
      if (document.exitFullscreen) {
   		   document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
		  }
    } else {
      if (!document.mozFullScreen && !document.webkitFullScreen) {
        if (container.requestFullscreen) {
            document.documentElement.requestFullscreen();
        }
        else if (container.mozRequestFullScreen) {
            document.documentElement.requestFullscreen();
        }
        else if (container.webkitRequestFullScreen) {
            document.documentElement.requestFullscreen();
        }
        else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
        }
    	}
    }
});