Toggle fullscreen API with a single button

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.

 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();
});

<button id="fs-doc-button">FULLSCREEN</button>
<button id="fs-exit-doc-button">EXIT FULLSCREEN</button>