title: Toggle fullscreen API with a single button
body: <p>I have the fullscreen API working on the click of one button and exiting fullscreen on the click of another button. I would like to have the fullscreen toggle open and close with a single button.</p>
  
  <pre><code> var requestFullscreen = function(ele) {
      if (ele.requestFullscreen) {
          ele.requestFullscreen();
      } else if (ele.webkitRequestFullscreen) {
          ele.webkitRequestFullscreen();
      } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
      } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen();
      } else {
          console.log('Fullscreen API is not supported.');
      }
  };
  
  var exitFullscreen = function() {
      if (document.exitFullscreen) {
          document.exitFullscreen();
      } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
      } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
      } else {
          console.log('Fullscreen API is not supported.');
      }
  };
  
  var fsDocButton = document.getElementById('fs-doc-button');
  var fsExitDocButton = document.getElementById('fs-exit-doc-button');
  
  fsDocButton.addEventListener('click', function(e) {
      e.preventDefault();
      requestFullscreen(document.documentElement);
  });
  
  fsExitDocButton.addEventListener('click', function(e) {
      e.preventDefault();
      exitFullscreen();
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button id="fs-doc-button"&gt;FULLSCREEN&lt;/button&gt;
  &lt;button id="fs-exit-doc-button"&gt;EXIT FULLSCREEN&lt;/button&gt;
  </code></pre>