Using Javascript to switch between two div sections.

I'm working on a script that has two separate lines of content labeled as two separate div ids. My hope is to have a link that will trip a JS function that will figure out which of the two are currently showing (one shows by default) and turn that off while turning on the other.

I have an example script (very generic) that I can't get to work; if someone could fix this I could apply it to my more complicated script without a problem (hopefully ).

As a quick note, the two div id names are related; one is "{mydiv}on" and the other is "{mydiv}off}." The JS function is supplied with the root ("mydiv" in this example) and automatically creates the two variables of the actual div names.

Thanks for the help!

<div id="mydivon" style="display:block">This is on.</div>
<div id="mydivoff" style="display:none">This is off.</div>

<a href="#" onClick=toggleDiv('mydiv');">Toggle Div Visibility</a>

<script language="javascript">
  function toggleDiv(divid){
  
  	varon = divid + 'on';
	varoff = divid + 'off';

    if(document.getElementById(varon).style.display == 'none')
    { 
      document.getElementById(varon).style.display = 'block';
      document.getElementById(varoff).style.display = 'none'; 
    }
    
    else
    {
      document.getElementById(varoff).style.display = 'block';
      document.getElementById(varon).style.display = 'none';
    }
  
 } 
</script>

Code (markup):

 

Ah . . . never mind. Evidently it was a trivial typo error, I copy/pasted code from a different source, changed the variables, and now it works just fine.

If someone else is trying to do this, the correct code is:

<div id="mydivon" style="display:block">This is on.</div>
<div id="mydivoff" style="display:none">This is off.</div>


<a href="javascript:;" onmousedown="toggleDiv('mydiv');">Toggle Div Visibility</a>

<script language="javascript">
  function toggleDiv(divid)
  {
  
  	varon = divid + 'on';
	varoff = divid + 'off';

	if(document.getElementById(varon).style.display == 'block')
	{
	document.getElementById(varon).style.display = 'none';
	document.getElementById(varoff).style.display = 'block';
	}
	
	else
	{	
	document.getElementById(varoff).style.display = 'none';
	document.getElementById(varon).style.display = 'block'
	}
} 
</script>

Code (markup):

 

This is really cool. I found this very helpful for a project I am working on. This works great. I used it to create an informative pop-up info box that my users could toggle. I tried putting in some java script code in each div but it would not fire it when I toggled it after the first page load. I wonder how to make this work.

 

NOT even JavaScript's job anymore... at least if you don't care about IE8/earlier.

<input type="radio" name="mydivs" id="mydiv_on" checked>
<div>This is on.</div>
<label for="mydiv_off">Toggle to second div</label>

<input type="radio" name="mydivs" id="mydiv_off">
<div>This is off.</div>
<label for="mydiv_on">Toggle to first div</label>

Code (markup):

#mydiv_on,
#mydiv_off {
	/* we hide these off screen, if we set display:none it breaks in IE9+ */
	position:absolute;
	left:-999em;
}

#mydiv_on + div,
#mydiv_off + div,
#mydiv_on + div + label,
#mydiv_off + div + label {
	display:none;
}

#mydiv_on:checked + div,
#mydiv_off:checked + div,
#mydiv_on:checked + div + label,
#mydiv_off:checked + div + label {
	display:block;
}

Code (markup):

No JS needed.