Member Avatar for Tekkno

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
  • 95 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

Hi tekkno,

Try the following call with your onclick event:

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

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?

Member Avatar for essential

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.

Member Avatar for Tekkno

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?

Member Avatar for essential

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.