I've got this javascript toggle array script. It was working and I don't know what point it broke, but I am having trouble getting it working again. The code below is linked in an external .js file:

function toggle(showHideDiv, switchTextDiv) {
	var ele = document.getElementById("showHideDiv");
	var text = document.getElementById("switchTextDiv");
	if(ele.style.display == "none") {
    		ele.style.display = "block";
		text.innerHTML = "-";
  	}
	else {
		ele.style.display = "none";
		text.innerHTML = "+";
	}
}
function toggle2(contentDiv, controlDiv) {
        if (contentDiv.constructor == Array) {
                for(i=0; i < contentDiv.length; i++) {
                     toggle(contentDiv[i], controlDiv);
                }
        }
        else {
               toggle(contentDiv, controlDiv);
        }
}

Here is my href, as you can see the script toggles multiple div's.

<a id="Collapse" href="#" onclick="javascript:toggle2(,'Collapse');" onmouseover="hide()">

Can someone please tell me the problem?

Hi tekkno,

Try the following call with your onclick event:

<a href="javascript:void(0);" onclick="toggle2( ["legend", ...], 'Collapse' );" onmouseover="hide();">...</a>

Nope, still no luck. Nothing is hiding when I click the link. The name of the .js file has no bearing as long as I reference it correctly right? I am getting an error in IE however on hover, that references line 5 Char 2 but isn't specific to exactly what file. Is this line 5 of the JS file?

The problem is inside the toggle( showHideDiv, switchTextDiv ); function. Where you mistakenly quoted the two parameters for the object ids: document.getElementById( "showHideDiv" ); document.getElementById( "switchTextDiv" ); you must remove those quotes, to be able the toggle function to work.

Thank you essential, that did help, it now makes an attempt. But it only hides the first div in the array. Do you know what would cause that?

Here's a simple document sample, that you can use and expand.

Based on your posted code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html id="html40L" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
label + div {
margin-bottom : 1em; font : 700 16pt "Trebuchet MS", "Bernard MT Condensed", Verdana, Arial, sans-serif; }
-->
</style>
<script type="text/javascript">
<!--
var modern = ( document.getElementById );

var toggle = function( showHideDiv, switchTextDiv ) {
var ele = (( !!modern ) ? document.getElementById( showHideDiv ) : document.all[ showHideDiv ] );

var text = (( !!modern ) ? document.getElementById( switchTextDiv ) : document.all[ switchTextDiv ] );

   if ( text && ele ) {
   ele.style.display = (( ele.style.display !== "none" ) ? "block" : "none" );
   text.innerHTML = (( ele.style.display === "none" ) ? "-" : "+" );
   text.onclick = ( function() {
   
   this.innerHTML = this.title; // Do more stuff! 
      } ); 
   } return false;
}

var toggle2 = function( contentDiv, controlDiv ) { 
   var div = (( !!modern ) ? document.getElementById("main") : document.all.main );

   var ol = document.createElement("ol");
   var li;
   var a;
   var cdiv;
   contentDiv = contentDiv.split(/[\s\,]+/);
   ids = contentDiv;
   if ( contentDiv.length > 0 ) {
      for ( var i = 0; i < contentDiv.length; i++ ) {

         if (!((( !!modern ) ? document.getElementById( contentDiv[ i ] ) : document.all[ contentDiv[ i ] ] ))) {
            cdiv = document.createElement("div");
            cdiv.id = contentDiv[ i ];
            li = document.createElement("li");
            a = document.createElement("a");
            a.href = "javascript:void(0);";
            a.id = "a" + i;
            a.title = "Link #" + (( i ) + 1 ) + " Link id : " + contentDiv[ i ]; 
            a.appendChild( document.createTextNode( "Link #" + (( i ) + 1 ) + " Link id : " + contentDiv[ i ] ));
            a.onclick = "toggle('" + contentDiv[ i ] + "', this.id );";
            cdiv.appendChild( a );
            li.appendChild( cdiv );
            ol.appendChild( li );
            toggle( contentDiv[ i ], controlDiv );
            continue;
         } div.removeChild((( !!modern ) ? document.getElementById( contentDiv[ i ] ) : document.all[ contentDiv[ i ] ] ));
      } div.appendChild( ol ); return; 
   } toggle( contentDiv, controlDiv );
};

// -->
</script>
</head>
<body>
<div id="main">
<a id="Collapse" href="javascript:void(0);" onclick="toggle2('legend, animals, art, auto, media, computers, humor, knowledge, business', 'Collapse');">Toggle Function</a>
</div>
</body>
</html>
This article has been dead for over six months. Start a new discussion instead.