Tengo un xml en el siguiente formato;

<BasePeriod>
.
.
.
.
<Period>
    <start> stdate1 </start>
    <end> endate1 </end>
    <subperiod>
       <substart> substart1 </substart>
       <subend> subend1 </subend>
    </subperiod>
    <type> abc1 </type>
</Period>
<Period>
    <start> stdate1 </start>
    <end> endate1 </end>
    <subperiod>
       <substart> substart2 </substart>
       <subend> subend2 </subend>
    </subperiod>
    <type> abc2 </type>
</Period>
<Period>
    <start> stdate1 </start>
    <end> endate1 </end>
    <subperiod>
       <substart> substart3 </substart>
       <subend> subend3 </subend>
    </subperiod>
    <type> abc3 </type>
</Period>
</BasePeriod>

Lo que me gustaría hacer es: hacer que el Período y el Subperíodo se contraigan cuando abro el html y luego expandirlos cuando hago clic en él.

Tengo el siguiente xslt:

<xsl:for-each select="SvcPeriods/BasePeriod">
    <tr>
        <td>
            <xsl:value-of select="startDate"/>
        </td>
        <td>
            <xsl:value-of select="endDate"/>
    </td>
    <td>
        <a href="javascript:expandIt(per_expand{position()}), period_expand{position()}" name="period_expand{position()}" class="expandit">Periods</a>
        <div id="per_expand{position()}" style="display:none;" >
            <table>
                <thead>
                <tr>
                    <th>
                        Start Date
                    </th>
                    <th>
                        End Date
                    </th>
                    <th>
                        Sub Periods
                    </th>
                    <th>
                        Type
                    </th>
                </tr>
                </thead>
                <xsl:for-each select="Period">
                    <tr>
                        <td>
                            <xsl:value-of select="start"/>
                        </td>
                        <td>
                            <xsl:value-of select="end"/>
                        </td>
                        <td>
                            <a href="javascript:expandIt(subper_expand{position()}), subperiod_expand{position()}" name="subperiod_expand{position()}" class="expandit">Sub Periods</a>
                            <div id="subper_expand{position()}" style="display:none;" >
                                <table>
                                    <tr>
                                        <th >
                                            Start Date
                                        </th>
                                        <th >
                                            End Date
                                        </th>
                                    </tr>
                                    <xsl:for-each select="subperiod">
                                        <tr>
                                            <td>
                                                <xsl:value-of select="substart"/>
                                            </td>
                                            <td>
                                                <xsl:value-of select="subend"/>
                                            </td>
                                        </tr>
                                    </xsl:for-each>
                                </table>
                            </div>
                        </td>
                        <td>
                            <xsl:value-of select="type"/>
                        </td>
                    </tr>
                </xsl:for-each>
            </table>
        </div>
    </td>
</tr>
</xsl:for-each>

<script language="JavaScript">
function expandIt(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>

Con lo anterior, no puedo expandir el subperíodo. Luego intenté pasardocument.getElementById(subper_expand{position()}') como primer argumento a laexpandit función. Esta vez puedo expandir el subperíodo, pero el problema es que siempre se refiere al subperíodo del primer período (incluso cuando hago clic dentro del segundo o tercer período).

Puede alguien ayudarme aquí.

¡Gracias