expand/collapse all using elements

[crw150]

Hi,
I'm an extreme newbie to JavaScript, have searched dozens of threads and examples, but I'm still not sure what I should be trying to do. My XML document contains <item> elements, and some <item> elements contain a <note> element. I managed to write a JavaScript code that lets the user "display" or "hide" each note. But now I need a "[Display All | Hide All]" option at the top of the document. The pertinent parts of my stylesheet are pasted in below. What is the simplest way for me to add the expand/collapse all option? I'm sure this is quite basic, but if anyone is willing to take a look at this, I'd welcome any help or suggestions for what keywords to search.
Thanks,
crw150

<xsl:template match="/">
...
function unfold(folderID) {
anchor = document.getElementById('anchor'+folderID);
folder = document.getElementById('folder'+folderID);

// hide expand icon
// show folder div

anchor.style.display = "none";
folder.style.display = "block";

return;
}

function fold(folderID, display) {
anchor = document.getElementById('anchor'+folderID);
folder = document.getElementById('folder'+folderID);

// show expand icon
// hide folder div
anchor.style.display = display;
folder.style.display = "none";

return;
}
...
<table>
...
<xsl:for-each select="item">
...
<xsl:if test="note">
<span style="display:block;" id="anchorid{generate-id(.)}">
<a href="javascript:unfold('id{generate-id(.)}')" class="collapsed">+ Notes: (click to display)</a>
</span>
<div id="folderid{generate-id(.)}" class="folding">
<h5 class="folderlink">
<a href="javascript:fold('id{generate-id(.)}', 'block')" class="expanded">- Notes: (click to hide)</a>
</h5>
<div class="fixed">
<xsl:apply-templates select="note"/>
</div>
</div>
</xsl:if>
...
</xsl:template>

 

[crw150]

Okay never mind, I have it -- Almost! This code works:

function expandAll(folderID, display) {
notedivs = document.getElementsByTagName("div");
for (var i=0; i < notedivs.length; i++) {
notedivs.style.display = 'block';
}
}

function collapseAll(folderID) {
notedivs = document.getElementsByTagName("div");
for (var i=0; i < notedivs.length; i++) {
notedivs.style.display = 'none';
}
}

However, when I click "Expand All", it works correctly. But when I click "Collapse All", it collapses all the notes as it should, but then the links at the top of my page, this--

NOTES: [Expand All | Collapse All]

just disappears.

I'm calling the function like this:
<div>
<p><strong>NOTES:</strong><br/>
<span style="margin-left: 1em; white-space: nowrap;" id="anchorid{generate-id(.)}">[
<a href="javascript:expandAll('id{generate-id(.)}')" class="collapsed">Expand All</a></span> |
<span id="folderid{generate-id(.)}" style="display: inline;">
<a href="javascript:collapseAll('id{generate-id(.)}','block')">Collapse All</a></span> ]
</p>
</div>

So now what am I doing wrong?

Thanks to anyone willing to give me a clue here.
crw150

 

[tsuji]

You want to collapse all <div> container and that's how it results including the anchors themselves. A solution is to put those outside of a div.

 

[crw150]

Thank you. I fixed that now. Maybe I'm beginning to see the light. Except now I see that my funtions conflict--once I click "Collapse All", I can no longer open them individually. I assume that to correct that I need conditionals in each function.

I guess the <div> thing was a no-brainer, but I am so clueless. Thanks so much!