JQuery Accordion with SharePoint 2010 Custom List

Question

I have a FAQ custom list in Sharepoint 2010 with two columns: Question (title column renamed) and Answer.

I want to display the questions and answers from the sharepoint list in JQuery Accordion. How can it be done?

Answer 1

Aboud, actually, there are several ways how to accomplish this.

In your case when you have FAQ custom list, i am suggesting you to create additional custom view for displaying list items in accordion.

Implementation

A. Add custom view for FAQ list in Schema file (Schema.xml), below is provided source code for this View:

  <View BaseViewID="10" Type="HTML" WebPartZoneID="Main" DisplayName="Accordion" DefaultView="FALSE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/images/generic.png" Url="Accordion.aspx">
        <Toolbar Type="Standard" />
        <XslLink Default="TRUE">FAQ.xsl</XslLink>
        <RowLimit Paged="TRUE">30</RowLimit>
        <ViewFields>
          <FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Question"  Sealed="TRUE"/>
          <FieldRef Name="Answer" ID="{b0747420-54bc-41b2-a1b3-8432f2dbdc70}"></FieldRef>
        </ViewFields>
        <Query>
          <OrderBy>
            <FieldRef Name="ID"></FieldRef>
          </OrderBy>
        </Query>
        <ParameterBindings>
          <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />
          <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,noXinviewofY_DEFAULT)" />
        </ParameterBindings>
      </View>

Please note that you have to change FieldRefs element properties to your own, i.e ID, Name and DisplayName for fields Question and Answer. Also note that i am referencing custom XSLT style sheet for rendering custom View that we have added before.

B. Implement XSLT style sheet for processing list items to display them using Accordion (jQuery UI). Complete source code for QAndA.xsl is shown below:

  <xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema"
  xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
  version="1.0" exclude-result-prefixes="xsl msxsl ddwrt x d asp __designer SharePoint ddwrt2"
  xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
  xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
  xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  xmlns:SharePoint="Microsoft.SharePoint.WebControls"
  xmlns:ddwrt2="urn:frontpage:internal">
  <xsl:import href="/_layouts/xsl/main.xsl"/>
  <xsl:output method="html" indent="no"/>
  <xsl:template match="View[@BaseViewID='10']" mode="full" ddwrt:ghost="always">
    <tr class="ms-viewheadertr"></tr>
    <tr>
      <td>
        <div id="accordionFAQ">
           <xsl:apply-templates select="." mode="RenderView" />
        </div>   
      </td>
    </tr>
    <xsl:apply-templates mode="footer" select="." />
  </xsl:template>
  <xsl:template mode="Item" match="Row[../../@BaseViewID='10']" ddwrt:ghost="always">
    <xsl:param name="Fields" select="."/>
    <xsl:param name="Collapse" select="."/>
    <xsl:param name="Position" select="1"/>
    <xsl:param name="Last" select="1"/>
    <xsl:variable name="thisNode" select="."/>
    <h3>
      <xsl:value-of select="$thisNode/@Title" />
    </h3>
    <div>
        <xsl:value-of select="$thisNode/@Answer" disable-output-escaping="yes" />
    </div>
  </xsl:template>
  <xsl:template name="FAQViewOverride" mode="RootTemplate" match="View[List/@TemplateType=11999]" ddwrt:dvt_mode="root">
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
    <script>
      $(function() {
        $( "#accordionFAQ" ).accordion();
      });
    </script>
    <xsl:call-template name="View_Default_RootTemplate"/>
  </xsl:template>
</xsl:stylesheet>

Results

Below is shown FAQ List View displayed as Accordion for my case.

P.S. For more details, please see this post.

Answer 2

My simplest approach was using one Announcement list and jQuery tools (http://jquerytools.org/demos/tabs/accordion.html), plus one CEWP to include relevant scripts (stored in the a Library).

We ended-up building a simple web part using SPDataSource with a CAML query to load it.