How to change the visibility of a <div> tag using javascript in the same page?

Question

I'm working on a simple javascript code.

Based on the condition I should change the visibility of the tag from hidden to visible.

I should use javascript alone. No jQuery or AJAX. Any idea or suggestion please.

Answer 1

Using the visibility attribute:

Show the div with id="yourID":

document.getElementById("yourID").style.visibility = "visible";

To hide it:

document.getElementById("main").style.visibility = "hidden";

Using the display attribute:

Show:

document.getElementById("yourID").style.display= "block";

Hide:

document.getElementById("yourID").style.display= "none";

Answer 2

<div id="contentDiv">
    This is the content .
</div>

if you want to change the visibility of div with id="contentDiv" using javascript then you can do with..

var eleDiv = document.getElementById("contentDiv");


    // based on condition you can change visibility
if(eleDiv.style.display == "block") {
        eleDiv.style.display = "none";
}
else {
    eleDiv .style.display = "block";
}

Hope this code helps you........