Accordion Data View Web Part

Even more ‘fun’! Making nifty things with jQuery with the data view web part.

Finished Product

First component is a jQuery powered faked accordion script  with highlight of mouse over (a real accordion will not work in DVWP due to how the markup is output). Requires jQuery WebUI plugin:

$(document).ready(function()
{
$(“.accordion”).toggle(
function()
{
$(this).css(“font-size”, “17pt”);
$(“.cssClass”).css(“display”, “none”);
$(this).next().toggle(‘fast’);
},
function()
{
$(this).css(“font-size”, “16px”);
$(this).next().toggle(‘fast’);
});
$(“.accordion”).mouseover(
function()
{
$(this).css(“background”, “black”);
$(this).css(“color”, “white”);
}).mouseout(function()
{
$(this).css(“background”, “white”);
$(this).css(“color”, “black”);
});
});

Next, in your DVWP markup itself change all tr’s to div’s and all table tags to div as well. If you have a grouping within the view you can use this line for building the div which should be right above the xsl:choose:

displaystyle}; cursor:hand”>

The end div goes right above the end of the xsl:template.

Next, we need to make the wrapper div’s (which do not work as you’d expect preventing a real accordion). Look for “dvt_1.groupheader0″ and locate where the template is called: <xsl:call-template name=”dvt_1.groupheader1”>… On either side of this put .

You’ll need to this in two places as the first row check and all other rows both need the div wrapper.

Next, you need to remove the call-template for dvt_1.rowview altogether as we move it to be a child of the template of the group container.

<div>
<xsl:call-template name=”dvt_1.groupheader1″>
<xsl:with-param name=”fieldtitle”>Field
<xsl:with-param name=”fieldname”>Field
<xsl:with-param name=”fieldvalue” select=”$groupheader1″ />
<xsl:with-param name=”fieldtype” select=”‘int'” />
<xsl:with-param name=”nodeset” select=”msxsl:node-set($dvt_Rows)/root//Row[((@Field)=$groupheader1 or ((not(@Field) or @Field=”) and $groupheader1=’ ‘))]” />
<xsl:with-param name=”groupid” select=”‘1′” />
<xsl:with-param name=”displaystyle” select=”‘auto'” />
<xsl:with-param name=”imagesrc” select=”‘/_layouts/images/plus.gif'” />
<xsl:with-param name=”alttext” select=”‘expand'” />
<xsl:with-param name=”altname” select=”‘collapse'” />
<xsl:with-param name=”hidedetail” select=”false()” />
<xsl:with-param name=”showheader” select=”true()” />
<xsl:with-param name=”showheadercolumn” select=”false()” />
xsl:call-template>
<xsl:variable name=”dvt_KeepItemsTogether” select=”false()” />
<xsl:variable name=”dvt_HideGroupDetail” select=”false()” />
<xsl:if test=”(position() >= $FirstRow and position() <= $LastRow) or $dvt_KeepItemsTogether”>
<xsl:if test=”not($dvt_HideGroupDetail)” ddwrt:cf_ignore=”1″>
<xsl:call-template name=”dvt_1.rowview” />
xsl:if>
xsl:if>
</div>

This will give you a basic AJAX enabled/ready DVWP. I normally ignore the tables for the filter and footer areas altogether as there is no real benefit to ajax there unless you want to reinvent the wheel 🙂