Change the display block : none to block and vice versa.

While designing a web page especially the header it is important to know to change the content to none to block and vice versa by using Java Script.

It will be very helpful when we develop a responsive NavBar.

The java script code used for this is as follows:-

function toggleFunction() {       

var toggle = document.getElementById(‘id_of_div’);
        var displaySetting = toggle.style.display;
    if (displaySetting == ‘block’) {           

toggle.style.display = ‘none’;
    }   

else {           

toggle.style.display = ‘block’;         

}      }

Here , an Onclick=”toggleFunction()” is given to a content and in such a way that while clicking on the content the display changes.