Javascript onclick to set visibility in XSLT

Greetings,

I'm attempting to create some functionality for a collapsible navigation bar using Javascript and XSLT.  Basically, I want all the child nodes of a parent to be set to invisible until the parent node is clicked.  

Currently my output appears like this:

Title 1
   Subtitle 1.1
   Subtitle 1.2

Title 2
   Subtitle 2.1
   Subtitle 2.2

I would like my output to appear like this:

Title 1
Title 2

and only have the Subtitles visible only when the Title hyperlink is clicked.

Here is the XSLT:

<xsl:for-each select="child::NEWSTYPE/TITLE">
<a>
<xsl:attribute name="HREF">
<xsl:text disable-output-escaping="yes">#</xsl:text>
<xsl:value-of select="../@ID"/>
</xsl:attribute>
<xsl:value-of select="."/>
</a><br/>

<xsl:for-each select="following-sibling::NEWSAREA/TITLE">
<a>
<xsl:attribute name="HREF">
<xsl:text disable-output-escaping="yes">#</xsl:text>
<xsl:value-of select="."/>
</xsl:attribute>
<xsl:value-of select="."/>
</a><br/>
</xsl:for-each>
<br/>
</xsl:for-each>

I have been making several attempts of tweaking the <A attribute onclick="return false" STYLE="visibility:hidden"> ... to no avail.  I've embedded some javascript to the parent document and don't know how to fix this ...

Any advice or guidance is greatly appreciated!

Thanks so much for helping me!
Jamie