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.

Solution 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";

Solution 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........

Solution 3

Though asked not to be done with jquery, but can be done as: $('.my_div_tag_id').css('visibility','hidden');

Solution 4

Visible:

var elem = document.getElementById("IdOfEl");
elem.style.display="block";

Hide:

var elem = document.getElementById("IdOfEl");
elem.style.display="none";

Solution 5

Call this function when you want to show the div. Write that conditions in your segment/case.

function showDiv() {
    document.getElementById('divId').style.display = 'block';   //  or 'inline'
}

Let me know your feedback.

View more solutions

Comments

[bumerang]

this is not the same as settings visibility.