show/hide text with links

[mashadt]

I'm trying to use Javascript in my XSLT sheet to hide and reveal XML elements.

I would like there to be links at the top of the page that makes text elsewhere in the page appear or dissapear.

So far I can just show/hide the content of an element where that element is being processed.

Im using my XSLT style sheet to place this in the head section of the HTML document that gets generated

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

and this in the XSLT style sheet to get the link to show, and to make the contents of the element show/hide

<xsl:template match="instruction">
<span onclick="toggle(lstyle);">[Instruction]</span>
			
<div id="lstyle" style="display: none;">
<ul ><li>
<xsl:apply-templates select="step"/>
</li></ul>
</div>
		
</xsl:template>

 

[mashadt]

OK - Ive managed to do it like this: but now I get an error message telling me that "one" is undefined.

<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>

 

[JontyMC]

How is javascript supposed to know what one and two are? Use this:

<span onclick="toggle(document.getElementById('one'));">[link]</span>
<span onclick="toggle(document.getElementById('two'));">[link]</span>

Jon

"Asteroids do not concern me, Admiral. I want that ship, not excuses.

 

[mashadt]

OK - thanks.