Toggling Div Display Not Quite Working

[hererxnl]

I'm trying to use a function to toggle two divs and an image source using the image as a link. The link and image are output using asp like this:

<a href=""javascript:showTracks('" & CStr(intTrackList) & "');""><img src='images/expand.gif' id='expand" & CStr(intTrackList) & "' width='48' border='0'/></a>

Here are the divs via asp:
div 1 -

<div class='trackcount' align='center' id='trackcount" & CStr(intTrackList) & "'>blah blah</div>

div 2 -

<div class='tracklist' id='tracklist" & CStr(intTrackList) & "' align='center'>blah blah</div>

Here's my function:

function showTracks(id){
	if(document.getElementById){
		if(document.getElementById("expand"+id).src="images/expand.gif"){
			document.getElementById("trackcount"+id).style.display=document.getElementById("trackcount"+id).style.display?"block":"none";
			document.getElementById("tracklist"+id).style.display=document.getElementById("tracklist"+id).style.display?"none":"block";
			document.getElementById("expand"+id).src="images/hide.gif";
		}
		else if(document.getElementById("expand"+id).src="images/hide.gif"){
			document.getElementById("trackcount"+id).style.display=document.getElementById("trackcount"+id).style.display?"none":"block";
			document.getElementById("tracklist"+id).style.display=document.getElementById("tracklist"+id).style.display?"block":"none";
			document.getElementById("expand"+id).src="images/expand.gif";
		}
	}
}

So the initial toggle seems to work fine. The visible div is hidden, the hidden div is exposed, and my image is switched. The trouble begins there.

When I click the link again the two divs are switched but the image is not changing. Worse yet the link now produces no actions on subsequnt clicks.

Any help is greatly appreciated. Thanks in advance.

 

[hererxnl]

hmm.

I think I understand why this isn't working but how to make it work is another question entirely.

Seems switching the image source won't work as a variable to test condition against. The second click of this function finds the first condition true again.

The source of this function was a page where the author was using hard coded div#blah in his css. Since the data I'm working with is dynamic that didn't work for me. I wrote a css class and applied it to each div.

I think this is the root of the problem but still don't have an answer.

Must be a dumb question cause I seem to be talking to myself...

 

[Abraxus]

Perhaps you've paraphrased your asp portions, but I've never had success writing asp code without putting it inside of <% %> tags, and using functions such as Response.Write (or the shorthand = operator).

Assuming that your asp code is actually working as you've intended, I would suggest putting everything you want inside of a div and then toggling its display. Since the function is called inside the href you could easily refer to it using this to change the image source, while using the same function to evaluate and toggle the div displays.

 

[hererxnl]

Thanks for the suggestions. I had paraphrased my ASP, which is working fine. I'll give it a go.

 

[hererxnl]

Here's what I ended up doing:

Four div's, two containing images, two containing content.

The first div calls this function:

function showTracks(id){
	if(document.getElementById){
			document.getElementById("expand"+id).style.display="none";
			document.getElementById("hide"+id).style.display="block";
			document.getElementById("trackcount"+id).style.display="none";
			document.getElementById("tracklist"+id).style.display="block";
	}
}

The second calls this function:

function hideTracks(id){
	if(document.getElementById){
			document.getElementById("expand"+id).style.display="block";
			document.getElementById("hide"+id).style.display="none";
			document.getElementById("trackcount"+id).style.display="block";
			document.getElementById("tracklist"+id).style.display="none";
	}
}

Expands AND contracts the used/unused white space. Works like a charm, hopefully it helps someone else.

 

[hererxnl]

One more thing, I adapted this from another person's script. They included support for additional browsers that are not as standards compliant, which I stripped out because I'm targeting a specific browser. Here's the link to the original script (all credit to lobo235):

http://www.netlobo.com/div_hiding.html