Creating a jQueryUI Accordion with a Data View Web Part

We can do all sorts of fun stuff that makes the user experience (UX) in SharePoint far better than it is out of the box. One of those things is to use jQueryUI widgets like an accordion to put a large amount of content on the page, but broken into categorized, consumable chunks. Most people are very accustomed to using things like accordions from other Web sites they visit regularly, and even if they aren’t things like accordions seem to make sense quickly.

I had forgotten about it, but I did a post earlier this year where I showed how Carlos Nunes-Ueno approached this. It turns out that our XSL looks similar, but here is another example based on an accordion I recently set up myself.

To start building this, we created two lists. The first list, which we called Accordion Headers, contains the names of the accordion panels plus a column we can use to adjust the order of the panels.

The other list, called Accordion Content, contains the accordion panel content, and has a Lookup column into the Title in the Accordion Headers list. We also pulled the Order column from the Accordion Headers list in with the header name. There are several other columns in this list that we used to construct the content for each accordion panel.

Once the lists were in place and populated, I just added a Data View Web Part (DVWP) to a page with the Accordion Content list as its DataSource.

If you look at the jQueryUI documentation page for the accordion widget, you can see that it wants the markup to look like this:

<div id="accordion">
 <h3><a href="#">First header</a></h3>
 <div>First content</div>
 <h3><a href="#">Second header</a></h3>
 <div>Second content</div>
</div>

The XSL is simple, but you have to roll your own; SharePoint Designer knows nothing about how to structure the rendered markup for this. To do this with the Accordion Content list, the XSL looked like this. Our panels contain unordered lists of links.

<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
  <xsl:call-template name="AccordionSetup"/>
</xsl:template>

<xsl:template name="AccordionSetup">
  <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
  <div id="left-accordion" style="width: 300px;">
    <xsl:for-each select="$Rows">
      <xsl:sort select="@AccHeading_x003a_Order" data-type="number"/>
      <xsl:sort select="@Order" data-type="number"/>
      <xsl:call-template name="AccordionPanels">
        <xsl:with-param name="Rows" select="$Rows"/>
      </xsl:call-template>
    </xsl:for-each>
  </div>
</xsl:template>

<xsl:template name="AccordionPanels">
  <xsl:param name="Rows"/>
  <xsl:variable name="NewHeading" select="ddwrt:NameChanged(string(@AccHeading.), 0)"/>
  <xsl:if test="string-length($NewHeading) &gt; 0">
    <h3>
      <a href="#{substring-before(@AccHeading., ';#')}">
        <xsl:value-of select="substring-after(@AccHeading., ';#')"/>
      </a>
    </h3>
    <div>
      <ul>
        <xsl:variable name="PanelRows" select="$Rows[@AccHeading. = current()/@AccHeading.]"/>
        <xsl:for-each select="$PanelRows">
          <xsl:call-template name="AccordionPanelContent"></xsl:call-template>
        </xsl:for-each>
      </ul>
    </div>
  </xsl:if>
</xsl:template>

<xsl:template name="AccordionPanelContent">
  <li>
    <xsl:value-of select="@Title"/> - <a href="{@ContentLink}"><xsl:value-of select="@ContentLink.desc"/></a>
  </li>
</xsl:template>

It’s pretty simple, really, and what we ended up with is a nicely organized, list-driven accordion which is easy to use and easy to maintain. No developer required to make changes whatsoever. It’s a win-win all around.

<UPDATE dateTime=”2011-11-03T09:26″>

It occurred to me, though no one complained, that I hadn’t shown the jQuery to activate the accordion. Getting the markup right is really the hard part, as the jQuery can be as simple as this:

$("#left-accordion").accordion();

In this particular case, we set a few options as well:

$("#left-accordion").accordion({
  active:false,
  autoHeight: false,
  collapsible: true
});

I’ll leave it to you to check the jQueryUI docs to see what each option does.

</UPDATE>