JavaScript Show/Hide

Wee · 3 Mar 2007 at 13:51

I've only just started to use JavaScript, but I was attempting to create a simple function that would allow a user to click on a link were it would show or hide a DIV. I managed to get the DIV to show when the link it clicked, but it when it's clicked again it doesn't want to hide.

Code:

var choice = 'hidden';

function showLogin(choice) {

  if (choice == 'hidden'){
  document.getElementById('login').style.display='block';
  var choice = 'display';}

else if (choice == 'display'){

  document.getElementById('login').style.display='none';
  var choice = 'hidden';}}

Here's the code on the HTML link.

Code:

<a href="javascript:showLogin(choice);">

Anyone got any pointers were I could be going wrong?

PsychoDuck · 3 Mar 2007 at 14:09

Try this, you can condense the code and make the if statement inline but I think that will just confuse you if you are just starting.

Code:

<html>
<head>

<script language = 'Javascript'>
function showdiv(divid)
{
	if (document.getElementById(divid).style.display == 'block')
	{
		document.getElementById(divid).style.display = 'none';
	}
	else
	{
		document.getElementById(divid).style.display = 'block';
	}

}

</script>

</head>

<body>

<a href="javascript:showdiv('choice');">show div</a>

<div name="choice" id="choice" style="display:block">test</div>

</body>
</html>

Wee · 3 Mar 2007 at 15:39

Cheers for the help. Will give it a shot as soon as my Uni's VPN connection decides to start working again.

JavaScript Show/Hide

Wee

Wee

PsychoDuck

PsychoDuck

Wee

Wee