boolean function to hide/show div

popapez · 03-20-2010, 07:55 PM

Hi, I am very new to javascript and html.

I am trying to create a function which will hide or show a div (div1). Right now, it is always showing the div whether the boolean value is true or false. I know that it is getting inside the else if part, but it doesn't seem to be working.

Code:

<script type="text/javascript">

function hideDiv(flag)
	{
	if (flag == false)
		{
		document.getElementById('div1').style.visibility="visible";
		}
	else if (flag == true)
		{
		document.getElementById(div1).style.visibility="hidden";
		}	
	}

var bool = new Boolean(true)
hideDiv(bool);
</script>

<body>
<div id="div1">
Text!
</div>
</body>

Thank you for taking a look

Philip M · 03-20-2010, 08:04 PM

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

Here you are:-

Code:

<script type="text/javascript">

function hideDiv(flag) {
if (flag == false) {  // or if (!flag) {
document.getElementById("div1").style.visibility="visible";
}
else if (flag == true) {  // or just else, or else if (flag) {
document.getElementById("div1").style.visibility="hidden";
}	
}

</script>

<body onload = "hideDiv(false)">

<div id="div1">
Text!
</div>

There is no point in creating the variable bool.

Quizmaster: On what part of the body is a lobotomy performed?
Contestant: The bottom.

popapez · 03-20-2010, 08:12 PM

Thank you very much, works great!

randomuser773 · 03-20-2010, 11:19 PM

Quote:

Originally Posted by popapez

Thank you very much, works great!

Wouldn't that function be more useful if it could be used on any element?

jmrker · 03-20-2010, 11:52 PM

Why not make it general purpose so that you might use it here or elsewhere?

Code:

<script type="text/javascript">
function hideDiv(IDS,flag) {
  var sel = document.getElementById(IDS);
  if (flag == false) { sel.style.visibility="visible"; }  // or sel.style.display="block";
                else { sel.style.visibility="hidden"; }	  // or sel.style.display="none";
}
</script>

<body onload = "hideDiv('div1',false);hideDiv('div2',true)">

<div id="div1">Text!</div>
<div id="div2">More Text!</div>