I standard html and the "display" style element. This javascript works like a charm i
IE/Mozilla/Opera:
function toggle(id) {
var element = document.getElementById(id);
with (element.style) {
if ( display == "none" ){
display = ""
} else{
display = "none"
}
}
}
An example
With an XML menu like this:
<?xml version="1.0" encoding="iso-8859-1"?>
<menu>
<menugroup name="aviser" id="avis">
<menuitem href="http://vg.no";>VG</menuitem>
<menuitem href="http://dagbladet.no";>Dagbladet</menuitem>
</menugroup>
<menugroup name="cocoon" id="cocoon">
<menuitem href="http://wiki.cocoondev.org/";>Wiki</menuitem>
<menuitem href="http://cocoon.apache.org/2.1/";>Cocoon 2.1</menuitem>
</menugroup>
</menu>
...the following XSLT creates the output
<xsl:template match="menu">
<div class="menu">
<xsl:apply-templates/>
</div>
</xsl:template>
<xsl:template match="menugroup">
<a onclick="javascript:toggle('[EMAIL PROTECTED]')" class="menybedr"><img
src="/images/plus.gif" style="padding-left: 5px;border: 0"/>
<xsl:value-of select="@name"/></a><br/>
<div id="[EMAIL PROTECTED]">
<xsl:attribute name="style">display:none</xsl:attribute>
<xsl:text> </xsl:text>
<xsl:apply-templates/>
</div>
</xsl:template>
<xsl:template match="menuitem">
<a style="padding-left: 10px">
<xsl:copy-of select="@*"/>
<xsl:text >- </xsl:text>
<xsl:value-of select="."/>
</a><br/>
</xsl:template>
... Where the "menugroups" are expandable
Regards,
Andr� Velle
> -----Original Message-----
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
> Sent: 2. desember 2003 10:49
> To: [EMAIL PROTECTED]
> Subject: Tree widget
>
>
> several times in the past i was try to represent xml data in
> a tree view
>
> they are different appraches to this problem
>
> looking around in the internet i have found greate javascript
> trees just
> like at www.destroydrop.com
>
> but the problem with this approach is that you have to create
> the whole
> tree in javascript nand then "play" this code in browser
>
> at least i have deside that is more clean to have a [xml
> (tree) --> html] and a generic js code make the html output
> behave as tree
> (expand/collapse)
>
> the best solution (i thing) is using behaviors (.htc) but are
> supported
> only from IE
>
> i dont know i something similar is suported from mozilla
>
>
> i have something that work in this way using a simple js but
> its very-very simple
>
> --stavros
>
>
