using Javascript in XSL-XML

my XML file "p1.xml" looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="ss1.xsl"?>
<f1>
	<s1>
some text
	</s1>

	<s2>
even some more text
 </s2>
	
</f1>

with the XSL "ss1.xsl" like this:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
	<xsl:template match="/">
<style>
<!--
#s1 {
border:1px solid #ccc;
background:#f2f2f2;
padding:20px;
}
-->
</style>
		<script type="text/javascript">

function sm(obj) {

	var el = document.getElementById(obj);

	if ( el.style.display != "none" ) {

		el.style.display = 'none';

	}

	else {

		el.style.display = ' ';

	}

}

</script>
		<TABLE STYLE="border:1px solid black">
			<tr>
				<b>title goes here</b>
			</tr>
			<TR>
				<TD>group 1 <img src="images\plus.gif" onclick="sm('s11')"/>
				</TD>
				<DIV id="s11">
					<TD>
						<xsl:copy-of select="document('p1.xml')//f1/s1/."/>
					</TD>
				</DIV>
			</TR>
		</TABLE>
	</xsl:template>
</xsl:stylesheet>

And I want XSL to use this bit of Javascript to collapse/expande or hide/show
this <TD><DIV> cell of table.

but it does not work properly. Can anyone advise me, what to improve in order
for XSL to understand this function.

Thank you very much for your advice.



____________________
http://www.email.si/