hide/show text with XSLT

[wxdqz]

I am trying to set up an XSLT style sheet that uses javascript to create an html page with links at the top. These links will hide/show elements in the rest of the page. The XSLT style sheet is transforming XML into html

so far I have had limited success using

<script type="text/javascript">
function toggle(element) {
if (element.style.display == 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
</script>


and then using this: but this gives me an error message that "one" is undefined. I can also see this is probably not a good way to do it.


<xsl:template match="links">
<span onclick="toggle(one);">[link]</span>
<span onclick="toggle(two);">[link]</span>

</xsl:template>
<xsl:template match="instruction">

<div id="one" style="display: none;">
<ul ><li>
<xsl:apply-templates select="//content"/>
</li></ul>
</div>

</xsl:template>

<xsl:template match="instruction">

<div id="two" style="display: none;">
<ul ><li>
<xsl:apply-templates select="//step"/>
</li></ul>
</div>

</xsl:template>