pseudo collapsable tree script 1

[electricphp]

I have this line of code:

<div onclick="displayRow();" class="menu_selector"><img src="plus.gif" width="9" height="9" class="img_mar_link"> <strong>Presentations</strong></div>

I need to modify the displayRow() function so that when someone clicks on the div, the plus.gif gets replaced by minus.gif

and if they click it again the minus.gif gets replaced by a plus.gif

 

[kaht]

Make the following changes:

<div onclick="displayRow([!]this[/!]);" class="menu_selector"><img src="plus.gif" width="9" height="9" class="img_mar_link"> <strong>Presentations</strong></div>

<script type="text/javascript">

function displayRow([!]obj[/!]) {
   [!]var expandImage = obj.getElementsByTagName("img")[0];
   expandImage.src = (expandImage.src == "plus.gif") ? "minus.gif" : "plus.gif";[/!]
   //all the other stuff you didn't post
}

</script>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[electricphp]

when I try it nothing happens.

then I tried this:

expandImage.src = (expandImage.src == "minus.gif") ? "plus.gif" : "minus.gif";

and it switched to a minus bud then when I clicked it again it didn't switch bac to a plus

 

[kaht]

It's probably reading the full path to the image when doing the evaluation. For instance, when we pull the src value from the image, it's returning "/image/minus.gif" instead of "minus.gif". That being the case, the ternary operator would never be true (denoted in red), so it's always setting it to the false value (denoted in green):

expandImage.src = [!](expandImage.src ==  "minus.gif")[/!] ? "plus.gif" : [green]"minus.gif"[/green];

So, instead of checking for a direct match, you just check to see if minus.gif exists in the src somewhere. Personally, I would use regexp for this, but I use regexp for everything:

expandImage.src = ([!]/minus\.gif/.test(expandImage.src)[/!]) ? "plus.gif" : "minus.gif";

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[electricphp]

ok that works now, but now I have another problem.

I have this other function:

function displayRow1(obj){

var rowa = document.getElementById(obj);
if (rowa.style.display == '') rowa.style.display = 'none';
else rowa.style.display = '';
}

and I need to do the same for it.

The function is invoked from this:

<div onclick="displayRow1(<? echo "'a".$i."'";?>)" class="menu_selector"><img src="plus.gif" width="9" height="9" onclick="displayRow1(<? echo "'a".$i."'";?>)" class="img_mar_link" ><? echo $rowpro["cat"];?></div>


so there are 2 problems, the first one is that this function is already receiving a parameter.

The second prolem is that this div is in a php while loop so it's outputting multiple divs based on a datbase query.

hope that makes sense.

thanks for your help

 

[electricphp]

never mind, I figured it out, I created another function calling it collapse, and I just separated the code