How To Show And Hide An Element Using JavaScript

For More Videos Visit Our YouTube Channel

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.


Hide Or Show Element without Retaining Space

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.

Hide Or Show Element by Retaining Space

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.