none
Creating collapsible areas (in HTML) in XSLT

    Question

  • Hi all,

    I am trying do something a little tricky in XSLT and that is to create collapsible area's in a HTML document.

    Basically my source XML contains many node set collections and what I want to do is to display the first entry in the collection and then beside this I have a +/- image which users can click on to expand/collapse the element. I have gotten so far with this, but have come up against a brick wall as not sure what to do now. I have the following XML.

    <Dto01 value="20080829">
              <Rating Date="20080829">
                <Rating value="90" />
                <CreditZone value="4" />
                <Date value="20080829" />
              </Rating>
              <Rating Date="20050812">
                <Rating value="96" />
                <CreditZone value="5" />
                <Date value="20050812" />
              </Rating>
    	  ...
     	  ...
    </Dto01>
    So I would like to have only the first entry in this collection to show, but once the user clicks the +/- button, more show.

    The following is the XSLT I have currently have...

    <xsl:template match="Dto13/CompCap">
    <tr>
    <xsl:variable name="source-id" select="generate-id(.)"/>

    <!-- Get the iteration value -->
    <xsl:variable name="IterationPosition">
    <xsl:number value="position()" format="1" />
    </xsl:variable>

    <xsl:if test="$IterationPosition > 1">
    <xsl:attribute name="class">collapsed</xsl:attribute>
    <xsl:attribute name="id">src<xsl:value-of select="$source-id"/></xsl:attribute>
    </xsl:if>

    <td class="collection_list">
    <!-- If IterationValue = 1, output image link -->
    <xsl:if test ="$IterationPosition = 1">
    <a>
    <xsl:attribute name="onClick">
    javascript:document.images['<xsl:value-of select="$source-id"/>'].click()
    </xsl:attribute>
    <img src="images/panel_Plus.gif" alt="expand/collapse section" class="expandable" onclick="changepic()" border="0"/>
    </a>
    </xsl:if>

    <xsl:call-template name="FormatDate">
    <xsl:with-param name="DateTime" select="@Date" />
    </xsl:call-template>
    </td>
    <td class="collection_list">
    <xsl:call-template name="FormatAccountValue">
    <xsl:with-param name="FinancialItem" select="Capital/@value" />
    </xsl:call-template>
    </td>
    </tr>
    </xsl:template>
    one of the problems I have in there is that each <tr> element that gets created after the 1st iteration through the <Rating> nodeset gets assigned the CSS class 'collapsed', but thinking about it, I need my JS call to collapse/expand them all in one go by assigning a CSS class to them.

    Is anyone able to help me with this as I am pulling me hair out :-s
    Tryst
    Thursday, April 30, 2009 10:56 PM

All replies

  • XSLT generates HTML or XML or plain text from XML input. Collapsing/expanding does not happen with XSLT, instead it would happen later on in the browser, when the generated HTML is displayed and the browser supports script for the collapsing/expanding. So this is not really an XSLT problem, you simply need to define the HTML/CSS/Script result you want to generate with your XSLT.
    For instance, here is an example that generates HTML with script to page through sections in a table: http://home.arcor.de/martin.honnen/xslt/test2009010701.xml . The stylesheet is here . The script is here .

    So you need to get the HTML and the script (and maybe the CSS) right first, then it is simply a task of generating that HTML with XSLT.
    MVP XML My blog
    Friday, May 1, 2009 11:53 AM
  • Hi Marin, and thanks for your reply.

    Your example is more related to Paging (although the example shows how to Generate CSS/HTML etc via XSLT), I wanted to re-create something along the lines as the 'UpgradeLog.xml' and 'UpgradeReport.xslt' that is created by VS2005 when you upgrade a solution from .NET 1.1 to .NET 2.0.

    I can't really show you the files at the moment since I am unable to FTP any files onto my server from my current location.

    When I get the chance I will show you what I mean.

    Thanks
    Tryst
    Tuesday, May 5, 2009 2:52 PM