0

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?

2
Contributors
5
Replies
6
Views
7 Years
Discussion Span
Last Post by essential
0

Hi tekkno,

Try the following call with your onclick event:

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

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?

0

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.

0

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?

0

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.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.