locked
Custom Expand / Collapse in DVWP RRS feed

  • Question

  • Hi,

    I've created a DVWP from a list grouped by Dept. I found either Expand or Collapse option available. My requirement is to show up the items (Expanded by default) depending on the user's dept and items that are common to all depts, rest all should be in collapsible mode.

    Thanks,
    Naveen
    Friday, July 24, 2009 10:34 AM

Answers

  • Once you get into DVWP-land and you make customizations, you may well need to build the expand/collapse behavior yourself in your XSL.  You'll need to use some JavaScript (or jQuery).

    M.
    Marc D Anderson - Sympraxis Consulting LLC - Marc D Anderson's Blog
    Friday, July 24, 2009 2:20 PM
  • I agree with Marc. It's probably best to build your own expand/collapse functionality into your XSL.  You'll need a link on each item in your XSL that handles the expand/collapse click:

    <div style="display: none;">
    	<xsl:attribute name="id">item<xsl:value-of select="position()" /></xsl:attribute>
    	<!-- all of your XSL fields will appear here -->
    </div>
    
    <a>
    	<xsl:attribute name="id">itemToggleLink<xsl:value-of select="position()" /></xsl:attribute>
    	<xsl:attribute name="href">javascript:toggle('item'+'<xsl:value-of select="position()" />');</xsl:attribute>
    	Toggle
    </a>

     


    In the above example, you would have a <DIV> tag for each item in your data set, and the DIVs would have increasing IDs (item1, item2, item3, etc.).  You'll have an <A> tag that handles the expand/collapse click.  This <A> tag also has an increasing ID (itemToggleLink1, itemToggleLink2, etc.), in case you'd like to change the text from "Expand" to "Collapse," etc. (we won't do this in this example).  Now that you have this in your XSL, it's time to put in your javascript (this can be attached to your page anywhere):

    function toggle(objId)
    {
    	var showHideObj = document.getElementById(objId);
    	
    	if(showHideObj.style.display == "block")
    	{
    		showHideObj.style.display = "none";
    	}
    	else
    	{
    		showHideObj.style.display = "block";
    	}
    }
    You can probably use jQuery to make this JS code a lot cleaner (and you wouldn't even have to use sequential IDs, etc.), but writing it out like this makes more logical sense, I think, so hopefully it's a bit easier to understand.

    Good luck!
    Kyle
    Friday, July 24, 2009 2:45 PM

All replies

  • Once you get into DVWP-land and you make customizations, you may well need to build the expand/collapse behavior yourself in your XSL.  You'll need to use some JavaScript (or jQuery).

    M.
    Marc D Anderson - Sympraxis Consulting LLC - Marc D Anderson's Blog
    Friday, July 24, 2009 2:20 PM
  • I agree with Marc. It's probably best to build your own expand/collapse functionality into your XSL.  You'll need a link on each item in your XSL that handles the expand/collapse click:

    <div style="display: none;">
    	<xsl:attribute name="id">item<xsl:value-of select="position()" /></xsl:attribute>
    	<!-- all of your XSL fields will appear here -->
    </div>
    
    <a>
    	<xsl:attribute name="id">itemToggleLink<xsl:value-of select="position()" /></xsl:attribute>
    	<xsl:attribute name="href">javascript:toggle('item'+'<xsl:value-of select="position()" />');</xsl:attribute>
    	Toggle
    </a>

     


    In the above example, you would have a <DIV> tag for each item in your data set, and the DIVs would have increasing IDs (item1, item2, item3, etc.).  You'll have an <A> tag that handles the expand/collapse click.  This <A> tag also has an increasing ID (itemToggleLink1, itemToggleLink2, etc.), in case you'd like to change the text from "Expand" to "Collapse," etc. (we won't do this in this example).  Now that you have this in your XSL, it's time to put in your javascript (this can be attached to your page anywhere):

    function toggle(objId)
    {
    	var showHideObj = document.getElementById(objId);
    	
    	if(showHideObj.style.display == "block")
    	{
    		showHideObj.style.display = "none";
    	}
    	else
    	{
    		showHideObj.style.display = "block";
    	}
    }
    You can probably use jQuery to make this JS code a lot cleaner (and you wouldn't even have to use sequential IDs, etc.), but writing it out like this makes more logical sense, I think, so hopefully it's a bit easier to understand.

    Good luck!
    Kyle
    Friday, July 24, 2009 2:45 PM