Affichage xsl xml

Bonjour,
Je souhaite afficher une liste de catégorie de façon intéractive avec un signe + ou - devant le nom de ma catégorie qui permet de déplier ou replier la sous arborescence.
J'ai trouver un site très bien qui indique la façon de faire pour arriver à cet objectif : http://www.chez.com/xml/index.htm.
Mon problème est que mon programme fait déplier et replier la sous arbo lorsque l'utilisateur clique sur + ou - ET le nom de la catégorie alors que j'ai besoin que cette action se fasse lorsqu'on clique sur + ou - seulement car le nom de ma catégorie doit me permettre de faire le lien (hypertexte) avec une autre page...!!
J'espère avoir été assez clair !!!?

mon code xml :
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="styles.xsl" type="text/xsl"?>
<site>
<file><num>7</num><nom>projets</nom>
<file><num>1</num><nom>monetique</nom>
<file><num>4</num><nom>cartes</nom>
<file><num>6</num><nom>CB</nom>
</file>
</file>
<file><num>5</num><nom>cheques</nom>
</file>
</file>
<file><num>2</num><nom>materiel</nom>
</file>
<file><num>3</num><nom>logiciel</nom>
</file>
</file>
</site>

mon code xsl :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<?LINK rel="stylesheet" type="text/css" href="styles.css"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" indent="no"/>
<xsl:template match="file">

<script>
<![CDATA[
var deplier = true;
var replier = false;

function deplirepli(dossier, depli) {
plus = dossier.children[0];
moins = dossier.children[1];
div = dossier.parentElement;
moins.style.display = depli ? "" : "none";
plus.style.display = depli ? "none" : "";
dossier.title="Cliquer pour " + (depli ? "re" : "dé") + "plier";
div.children[1].style.display= depli ? "" : "none";
}

function toggleDisplay(dossier) {
plus = dossier.children[0];

if (plus.style.display=="")
// le signe plus est visible : il faut déplier
{
deplirepli(dossier, deplier);
}
else
// replier
{
deplirepli(dossier, replier);
}
}

]]>
</script>
<a href="central.php?page={num}" target="central">
<xsl:value-of select="nom"/>
</a>
<DIV class="wrapping">
<div class="title" onclick="toggleDisplay(this)">
<SPAN>+</SPAN><SPAN STYLE="display:none" >-</SPAN>
[#]<xsl:value-of select="nom"/> </div>
<div CLASS="wrapping" STYLE="display:none">
<xsl:apply-templates select="file"/>
</div>
</DIV>
</xsl:template>
</xsl:stylesheet>

Si je met un lien <a href=></a> autour de [#]<xsl:value-of select="nom"/>, le lien fonctionne mais cela fait aussi déplier ou replier ma sous arbo!! J'ai tout essayer dans tout les sens, j'ai besoin d'aide !!!

Merci bcp !!

Salut,

pourrais tu utiliser le balisage BBcode pour baliser ton code s'il te plait
merci, ça facilite la lecture

ok pas de problème ! c juste que je ne connait pas, je vais faire un essai :

mon code xml :

[i]<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="styles.xsl" type="text/xsl"?>[/i]
<site>
<file><num>7</num><nom>projets</nom>
  <file><num>1</num><nom>monetique</nom>
    <file><num>4</num><nom>cartes</nom>
      <file><num>6</num><nom>CB</nom>
      </file>
    </file>
  <file><num>5</num><nom>cheques</nom>
  </file>
</file>
<file><num>2</num><nom>materiel</nom>
</file>
<file><num>3</num><nom>logiciel</nom>
</file>
</file>
</site>

mon code xsl :

<?xml version="1.0" encoding="ISO-8859-1" ?>
[i]<?LINK rel="stylesheet" type="text/css" href="styles.css"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">[/i]

<xsl:template match="file">

[#blue]<script>
<![CDATA[
var deplier = true; 
var replier = false;

function deplirepli(dossier, depli) {
plus = dossier.children[0];
moins = dossier.children[1];
div = dossier.parentElement;
moins.style.display = depli ? "" : "none"; 
plus.style.display = depli ? "none" : ""; 
dossier.title="Cliquer pour " + (depli ? "re" : "dé") + "plier";
div.children[1].style.display= depli ? "" : "none"; 
}

function toggleDisplay(dossier) {
plus = dossier.children[0];

if (plus.style.display=="")
    // le signe plus est visible : il faut déplier 
    { 
     deplirepli(dossier, deplier);
     }
else
    // replier
     { 
     deplirepli(dossier, replier);
     }
}

]]>
</script>[/#]

<DIV class="wrapping">
    <div class="title" onclick="toggleDisplay(this)">
    <SPAN>+</SPAN><SPAN STYLE="display:none" >-</SPAN>
    [#red]<xsl:value-of select="nom"/>[/#]
    </div>
    <div CLASS="wrapping" STYLE="display:none">
    <xsl:apply-templates select="file"/>
    </div>
</DIV>
</xsl:template>
</xsl:stylesheet>

Help un modérateur dans le coin ?
Cette question devrait se trouver dans le salon javascript.