toggle display--functions conflict

[crw150]

togShow controls individual buttons. expandCollapse controls all buttons. But the two functions do not work correctly together. What have I done wrong? The button to expandCollapse all must be clicked 2 or 3 times before it works. And once the "all" button has been clicked to hide all, the individual buttons will not work. Also, in the collapseExpand function, how do I toggle the text of the individual buttons? I'm sorry this code is so long, and I hope this makes sense.
crw150

var ids = new Array();
function togShow(folderID,obj) {
notedivs = document.getElementById('folder'+folderID);
if(notedivs.style.display=="block" || notedivs.style.display=="")
{
notedivs.style.display="none";
obj.value="click to display"; 
}
else{
notedivs.style.display="block";
obj.value="click to hide"; 
}}
					
function collapseExpand(){
collectElems = document.getElementsByTagName('div');
for(i=0;i<collectElems.length;i++)
if(collectElems[i].className=="answer")
ids[ids.length]=collectElems[i];
for(i=0;i<ids.length;i++)
if(ids[i].style.display=="block" || ids[i].style.display=="")
{ids[i].style.display = "none";
document.f3.b3.value="CLICK TO DISPLAY ALL NOTES";
}
else{
ids[i].style.display = "block";
document.f3.b3.value="CLICK TO HIDE ALL NOTES";
}}

<div id="toggleallid{generate-id(.)}" class="show">
<form name="f3">
<input name="b3" onclick="javascript:collapseExpand()" type="button" value="CLICK TO HIDE ALL NOTES"/>
</form>
</div>

<div class="container">
<div id="toggleid{generate-id(.)}" class="question">
<form name="f1">
<input name="b1" onclick="javascript:togShow('id{generate-id(.)}',this)" type="button" value="click to hide"/>
</form>
</div>

<div id="answerid{generate-id(.)}" class="answer">
<div id="folderid{generate-id(.)}">
<xsl:apply-templates select="note"/>
</div>
</div>
						
</div>

 

[tsuji]

When I read the functions, I can get confused. So I guess it may easily mislead the author as well. I would say insert enough curly brackets to delineate the logic better. May be that would help debugging. Though not a problem here, make local variables local.
[tt]
function collapseExpand(){
var collectElems = document.getElementsByTagName('div');
for(var i=0;i<collectElems.length;i++) [red]{[/red]
if(collectElems.className=="answer") [red]{[/red]
ids[ids.length]=collectElems;
[red]}[/red]
[red]}[/red]
for(var i=0;i<ids.length;i++) [red]{[/red]
if(ids.style.display=="block" || ids.style.display=="") {
ids.style.display = "none";
document.f3.b3.value="CLICK TO DISPLAY ALL NOTES";
} else {
ids.style.display = "block";
document.f3.b3.value="CLICK TO HIDE ALL NOTES";
}
[red]}[/red]
}
[/tt]

 

[crw150]

I corrected my code as shown above, and now all the togShow buttons (one for each individual note) work correctly, but the expandCollapse button (one button to expand or collapse all notes) does not work at all. Obviously, I don't understand. Are you saying you only cleaned up the basics, and I still need to find other problems?

I'm an extreme newbie. Please talk down to me!
Thanks,
crw150

 

[tsuji]

crw150,

Maybe your global ids has funny components. Why is it a global thing? Is it controlled as well by some other functions/handlers? If not really, put it inside the function. Or make a local variable overriding it because as I see it, it should be rebuilt each time collapseExpand() is called upon.
[tt]
function collapseExpand(){
[red]var ids = new Array();[/red]
var collectElems = document.getElementsByTagName('div');
// etc etc ... the same
}
[/tt]
- tsuji

 

[crw150]

Thank you so much. ids was a global variable because I don't know what the heck I'm doing. Now I am SO close, but there are still 2 problems, and surely they must be related.

One is that when I click to hide all notes, the value of the individual buttons does not switch from "click to hide" to "click to display".

The other problem goes like this:

On opening document, all notes are displayed by default.

I click note #1's button to hide only note #1. Note #1 is then hidden, and it's button value switches from "click to hide" to "click to display".

I then click the "CLICK TO HIDE ALL NOTES" button. Nothing happens to note #1, rightly so. And now all the other notes are hidden, but their individual button values still say "click to hide".

I then click the "CLICK TO DISPLAY ALL NOTES" button. Now all the notes EXCEPT note #1 are displayed again. (And again their button values do not change, so they all still say "click to hide", except the button for note #1.)

At this point, the only way to again display note #1 is to click it's individual button, which switches its button value back to "click to hide" and displays the note.

So...?? A wild guess, it seems this might involve some sort of "reset", like each function needs to know what the other has done. As well, it seems to me that the expandCollapse function should actually be "calling" the togShow function. But I only know XSL, so I'm having a hard time understanding the logic in JavaScript.

I apologize for such basic questions. I have a manual and do lots of web searches but am still lost. Any suggestion for a good tutorial is welcome. And of course, any hints or help!

Thanks so much for your patience.
crw150

 

[tsuji]

crw150,

It is because the button named quite independently with the div. You should name you button with tighter correlation with the div it controls.

For instance, your f3 and b3 can be named something like:
f3 --> f_toggleallid{generate-id(.))
b3 --> b_toggleallid{generate-id(.))
Then f3 and b3 can be found once toggleallid root is involved and you only replace it with prefixes f_ and b_.

Similarly for all other div's in particular those of answer class. For each collectElem you can get its name which would be answerid(generate-id(.) as generated during the xsl processing. Then by replacing answeridxxxxx by b_answeridxxxxx, you'll get the button corresponding to it. Then, referencing to it is possible. Once get its reference, you change the value successively inside the for loop.

- tsuji
ps. I wrote the above in real time. I don't even want to proof-read it. I hope you get the idea. It is hard to put it in words.

 

[crw150]

Okay, great! I think I see what you mean. Plus, I had saved some script from the web that's a bit complex for me, but I think it does something like that. I'll keep banging on my code. I just didn't know where to start.

Thank you very much!
crw150