Selecting DIV's via JS

[wilky27]

Hello, i would like to select different DIV sections by selecting a radio button. So far I have got:

function toggle( targetId ){

ie4 = ((navigator.appName == "Microsoft Internet Explorer&quot && (parseInt(navigator.appVersion) >= 4 ));
if (ie4){
target = document.all( targetId );
if (target.style.display == "none&quot{
target.style.display = "";
} else {
target.style.display= "none";
}
}

}


Now on a click event this will display whats in the relevent DIV tags but it will display them one after the other instead of one at a time. I need a way of hiding the other DIV's whilst one is selected!

hope this makes sense.

Thanks..

 

[theboyhope]

Here's an example:

<script type=&quot;text/javascript&quot;>

function toggleDiv() {

	var the_radios = document.getElementsByName( &quot;the_radios&quot; );

	for( var i=0; i < the_radios.length; i++ ) {

		var current_div = document.getElementById( the_radios[ i ].value );

		if( the_radios[ i ].checked != true ) {

			current_div.style.display = &quot;none&quot;;

		} else {

			current_div.style.display = &quot;block&quot;;
		}	
	}	
}

</script>

<form>
  <input value=&quot;divOne&quot; type=&quot;radio&quot; name=&quot;the_radios&quot; onclick=&quot;toggleDiv();&quot; />
  <input value=&quot;divTwo&quot; type=&quot;radio&quot; name=&quot;the_radios&quot; onclick=&quot;toggleDiv();&quot; />
  <input value=&quot;divThree&quot; type=&quot;radio&quot; name=&quot;the_radios&quot; onclick=&quot;toggleDiv();&quot; />
  <input value=&quot;divFour&quot; type=&quot;radio&quot; name=&quot;the_radios&quot; onclick=&quot;toggleDiv();&quot; />
</form>

<div id=&quot;divOne&quot;>One</div>
<div id=&quot;divTwo&quot;>Two</div>
<div id=&quot;divThree&quot;>Three</div>
<div id=&quot;divFour&quot;>Four</div>

Instead of hard-coding

var the_radios = document.getElementsByName( "the_radios" );

into the function, you could just trap the target element (or srcElement) and access the name property. Bit cooler that way.

HTH.

Oh, btw, document.all is global (not to mention an expensive resource) so, if you must write IE-only code just reference the element directly.

 

[wilky27]

cheers mate!

great help that!