title: full screen on button click using jQuery
body: <p>I have a jQuery code </p>
  
  <pre><code>function errorHandler() {
     alert('mozfullscreenerror');
  }
  document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
  
  // toggle full screen
  function toggleFullScreen() {
    if (!document.fullscreenElement &amp;&amp;    // alternative standard method
        !document.mozFullScreenElement &amp;&amp; !document.webkitFullscreenElement) {  // current working methods
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.cancelFullScreen) {
        document.cancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    }
  }
  
  // keydown event handler
  document.addEventListener('keydown', function(e) {
    if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
      toggleFullScreen();
    }
  }, false);
  </code></pre>
  
  <p>when I click on button then it is full screen the whole <code>body</code></p>
  
  <p>but I want to show only a div <code>testfullscreen</code> in full screen</p>
  
  <p>How can I achieve this ?</p>