Make div 'fullscreen' onClick of a button?

Question

I have a div that I want to go full-screen (100% width/height of Window size) onClick of a seperate button, image or link. How would I go about this using Javascript/jQuery?

Answer 1

Other solutions describe hiding browser chrome with the HTML5 fullscreen API, well supported as of Oct'20.

This jQuery will expand an element to the viewport :

$('#theButton').click(function() {
    $('#theDiv').css({
        position: 'fixed',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        zIndex: 999
    });
});

Answer 2

You can use the Following function to make any div Full Screen

    function goFullScreen(){

        var elem = document.getElementById(temp);

        if(elem.requestFullscreen){
            elem.requestFullscreen();
        }
        else if(elem.mozRequestFullScreen){
            elem.mozRequestFullScreen();
        }
        else if(elem.webkitRequestFullscreen){
            elem.webkitRequestFullscreen();
        }
        else if(elem.msRequestFullscreen){
            elem.msRequestFullscreen();
        }
    }

And to exit the Full Screen you can use the following function

       function exitFullScreen(){

            if(document.exitFullscreen){
                document.exitFullscreen();
            }
            else if(document.mozCancelFullScreen){
                document.mozCancelFullScreen();
            }
            else if(document.webkitExitFullscreen){
                document.webkitExitFullscreen();
            }
            else if(document.msExitFullscreen){
                document.msExitFullscreen();
            }

        }

The code works on any browser.