How To Show And Hide An Element Using JavaScript




Here we consider how to Show Or Hide An Element Using JavaScript. Lets start with one example here. Suppose we have a Div with ID hideDiv inside form as shown below. Now for showing and hiding this Div Using JavaScript, follow these code.




var element = document.getElementById('hideDiv');

element.style.display = 'none';                     // Hide Element using JavaScript
element.style.display = 'block';                     // Show Element using JavaScript
element.style.display = 'inline';                     // Show Element using JavaScript
element.style.display = 'inline-block';           // Show Element using JavaScript



If you wants to retain the space of the Div, then use following code.



var element = document.getElementById('hideDiv');

element.style.visibility = 'hidden';                // Hide Element But Retain Space Using JavaScript
element.style.visibility = 'visible';                // Show Element using JavaScript



That's only, by using above code, we can hide and shown an element using JavaScript.