Expanding/collapsing Nested Nodes In Xslt

I have an xml in the following format; . . . . stdate1 endate1

Solution 1:

Break your XSL into multiple templates

It's good practice to use many templates rather then one with "hidden" <xsl:for-each> elements.

BasePeriod:

<xsl:templatematch="SvcPeriods/BasePeriod"><tr><td><xsl:value-ofselect="startDate"/></td><td><xsl:value-ofselect="endDate"/></td><td><ahref="javascript:expandIt(per_expand{position()},
                per_expand{position()})"name="period_expand{position()}"class="expandit">Periods</a><divid="per_expand{position()}"style="display:none;"><table><tr><th> Start Date </th><th> End Date </th><th> Sub Periods </th><th> Type </th></tr><xsl:apply-templatesselect="Period"/></table></div></td></tr><xsl:call-templatename="expandIt"/></xsl:template>

Period:

<xsl:templatematch="Period"><tr><td><xsl:value-ofselect="start"/></td><td><xsl:value-ofselect="end"/></td><td><ahref="javascript:expandIt(subper_expand{position()},
                subperiod_expand{position()})"name="subperiod_expand{position()}"class="expandit">Sub Periods</a><divid="subper_expand{position()}"style="display:none;"><table><tr><th> Start Date </th><th> End Date </th></tr><xsl:apply-templatesselect="subperiod"/></table></div></td><td><xsl:value-ofselect="type"/></td></tr></xsl:template>

subperiod:

<xsl:templatematch="subperiod"><tr><td><xsl:value-ofselect="substart"/></td><td><xsl:value-ofselect="subend"/></td></tr></xsl:template>

expandIt:

<xsl:templatename="expandIt"><scriptlanguage="JavaScript">functionexpandIt(whichEl, link) {
        whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none";
        if ( link ) { 
             if ( link.innerHTML ) {
                if ( whichEl.style.display == "none" ) {
                      link.innerHTML = "[+] " + link.innerHTML.substring( 4 );
                   } else {
                      link.innerHTML = "[-] " + link.innerHTML.substring( 4 );
                   }
             }
         }
     }
    </script></xsl:template>

---

As you see I changed:

<a href="javascript:expandIt(subper_expand{position()}),
    subperiod_expand{position()}"

to:

<a href="javascript:expandIt(subper_expand{position()},
    subperiod_expand{position()})"

(same for per_expand). Result (using Opera):

Next (clicking Periods link):

Next (clicking sub periods):

It seems to be ok, expanding and collapsing work as expected.