Html5 Fullscreen Browser Toogle Button <p>I was reading about the HTML5 Fullscreen API. Now I came across a code which lets your browser go full screen.</p> <p>Now I want to add the functionality to do a toggle on full screen and normal screen. I am not able to understand the code fully.</p> <p>The button allows us to go full screen for browser. How come I can revert it to normal on click again?</p> <p><strong>CSS</strong></p> <pre><code>&lt;style&gt; body { margin: 0px; background-color: brown; } #contento:-webkit-full-screen { width: 100%; height: 100%; } #contento:-moz-full-screen { width: 100%; height: 100%; } &lt;/style&gt; </code></pre> <p><strong>Javascript</strong></p> <pre><code>&lt;script type="text/javascript"&gt; function goFullscreen(id) { // Get the element that we want to take into fullscreen mode var element = document.getElementById(id); // These function will not exist in the browsers that don't support fullscreen mode yet, // so we'll have to check to see if they're available before calling them. if (element.mozRequestFullScreen) { // This is how to go into fullscren mode in Firefox // Note the "moz" prefix, which is short for Mozilla. element.mozRequestFullScreen(); } else if (element.webkitRequestFullScreen) { // This is how to go into fullscreen mode in Chrome and Safari // Both of those browsers are based on the Webkit project, hence the same prefix. element.webkitRequestFullScreen(); } // Hooray, now we're in fullscreen mode! } &lt;/script&gt; </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;body id="contento"&gt; Hello &lt;button onclick="goFullscreen('contento'); return false"&gt; Click Me To Go Fullscreen! (For real) &lt;/button&gt; </code></pre> <p></p>