How To Show And Hide An Element Using JavaScript

For More Videos Visit Our YouTube Channel




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.