Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

up vote 3 down vote accepted

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.

enter image description here

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

share|improve this answer
    
this was very helpful, thank you Vgrem :) –  Aboud Dec 10 '12 at 8:59
    
Aboud, i'm glad it helped :) –  Vadim Gremyachev Dec 10 '12 at 9:06

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).

enter image description here

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.