Press "Enter" to skip to content

Using jQuery Accordion with Content Query Web Part

Thank you to everyone who attended my CQWP sessions at SPTechCon Austin and SPFest a while back. After lots of travel this year, I’m finally home catching up on long overdue blog posts. In my sessions, we had some great discussions and questions that came up.

Session Questions

  1. Does the CQWP work with Bootstrap?
    • Currently it does not and I’ve been working on figuring out if I can make it work with bootstrap. If I do get it working, I will definitely blog about it.
  2. When I enable publishing and disable it why do I still see the Content Query Web Part and other publishing web parts? Also, does everything still work when it’s deactivated?
    • One of the things that happens by design when the publishing features are activated, the web parts, content types, libraries, and other publishing features get deployed to the site collection and site.
    • When you deactivate the publishing features, everything that was deployed by the feature stays intact and everything still works.
    • The only thing that will happen is you will not be able to activate the publishing site feature on subsites without reactivating the site collection feature. Reactivating the site collection feature will also not overwrite any custom changes you may have added such as custom page layouts.

Create CQWP with jQuery Accordion

While I understand there are other options now such as JSLink (which I use a lot) there are still people that use the CQWP and I think there is a need at times for the CQWP especially for those who are on older versions of SharePoint.

Now onto using the CQWP and jQuery Accordion. Originally I refer people to Ben Tedder’s blog post Create a jQuery accordion with a SharePoint CQWP however many of you who attended my sessions mentioned you had issues getting it to work which led to me writing this blog post. The steps for this example will work in both SharePoint On-premises and SharePoint Online.


Step 1: Create FAQ List

In this example, I created a FAQ list.

  1. Create custom list for FAQs with the following fields:
    FAQColumnsRenamed Title column to Question and added Answer, Category, and Sort Order (created column without a space then added space after creation).
  2. Set Sort Order column decimal places to 0.
    03FAQ
  3. Added items to list. Since I will be grouping the items by category in the CQWP, I set the sort order based on the items in each category starting over with 1 for each category item.
    01FAQ

Step 2: Modify Custom XSL Style Sheets

I am using a modified CQWP that is linked to custom XSL style sheets. To learn more about using the CQWP with custom XSL style sheets please see Content Query Web Part – Part One: Using Custom XSL Style Sheets.

Group Header Template
I wanted greater control over the group header style without modifying the OOTB styles so I added a template to my custom header XSL file.

  1. Add template to custom XSL Header file (DemoHeader.xsl). The existing LargeText template was close to what I wanted so I duplicated the template in my DemoHeader.xsl file and renamed the copied template to CategoryHeader. I also changed the div class from <div class=”groupheader item large”> to <div class=”categoryheader”>.
<xsl:template name="CategoryHeader" match="*[@GroupStyle='CategoryHeader']" mode="header">
  <div class="categoryheader">
    <xsl:call-template name="OuterTemplate.GetGroupName">
      <xsl:with-param name="GroupName" select="@*[name()=$Group]"/>
      <xsl:with-param name="GroupType" select="$GroupType"/>
    </xsl:call-template>
  </div>
</xsl:template>
  1. Publish DemoHeader.xsl file.

Item Style Template
In order to use jQuery accordion with the CQWP items, I created a template in my custom Item Style that includes 3 divs with classes that will be called in the jQuery function.

  1. Add template to custom XSL Item Style file (DemoItemStyle.xsl). I added a div wrapper with class accordion-wrapper as well as a div for the Question (accordion-question) and one for the Answer (accordion-answer). You can make your div classes more generic such as using accordion-header & accordion-content instead of accordion-question & accordion-answer. Just make sure whatever names you use will be the same names you call in your jQuery function. Disable output escaping (disable-output-escaping) is required so that the HTML doesn’t render as plain text.
<xsl:template name="FAQAccordion" match="Row[@Style='FAQAccordion']" mode="itemstyle">
    <div class="accordion-wrapper">
        <div class="accordion-question"><xsl:value-of select="@Question"/></div>
        <div class="accordion-answer"><xsl:value-of select="@Answer" disable-output-escaping="yes" /></div>  	
    </div>
</xsl:template>
  1. Publish DemoItemStyle.xsl file.

Step 3: Create Page & Add CQWP

  1. Create page and add CQWP. For this example, I created a Wiki Page however you can use a Web Part page or Publishing Page if preferred.
  2. Set Query Source. I am only using a single list for this demo so I set the source to my custom FAQs list.

  1. Set Group items by to Category in ascending order and Sort items by to Sort Order in ascending order and uncheck Limit the number of items to display.

  1.  Under Styles set Group style to CategoryHeader and Item style to FAQAccordion. In the Fields to display: type the field names for the Question and Answer. You can use the internal field name or display name of the columns. I set Question to Title and Answer to Answer.

  1. Under Appearance, I changed the CQWP title to FAQs and set the Chrome Type to None. Of course you would set whatever preferences you want on how you want the web part appearance to display on your page. Once the changes are applied and the page is saved the web part will render similar to the screenshot below.

Step 4: Create CSS and jQuery Function

The next step is to create the CSS and jQuery function and then add it to the page. The method I’m going to use is to create a single HTML file, add the jQuery library reference, CSS, jQuery function, and then add it to the page via a Content Editor Web Part.

  1. Create empty HTML file in the Site Assets library of the root site collection. I named my file AccordionFAQs.html.
  2. Add reference to jQuery library. I only add this if my site is not already loading a jQuery library. A better option is to add a script to check if jQuery is already loaded and if it’s not then load it. For this demo however, I’m keeping it simple and just adding the reference.
<script src="/sites/demo/SiteAssets/scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
  1. Add CSS. Since the file is a HTML file you have to use the <style> tags to add CSS. If you are already using a custom .css file for your site, you can add your CSS in your .css file instead or create a separate .css file and add a reference to it in the html file. For this example, I’m keeping it all in my HTML file. I’ve added styling for the group header (.categoryheader) and styling for the accordion div classes.
<style>
/*** Accordion Style ***/
.categoryheader {
  font-size:22px;
  font-weight:bold;
  padding-bottom:10px;
  padding-top:10px;
}
.accordion-wrapper {
    border-top:1px dotted #ccc;
}
.accordion-question {
    font-size:1.2em;
    cursor:pointer;
    padding:10px;
}
.accordion-question:hover {
    background:#efefef;
}
.accordion-question.expanded {
    background:#dfdfdf;
}
.accordion-answer {
    padding:20px;
    font-size:14px;
}
</style>
  1. Add accordionLoad jQuery function.
<script>
function accordionLoad() {
    $(".accordion-question").removeClass("expanded");
    $(".accordion-answer").hide();
    $(".accordion-question").bind("click", function(){
        $(this).toggleClass("expanded");
        $(this).siblings(".accordion-answer").slideToggle();
    })
}

$(document).ready(function(){
    accordionLoad();
});
</script>

Here’s the full markup of the AccordionFAQs.html file.

<script src="/sites/demo/SiteAssets/scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
<style>
/*** Accordion Style ***/
.categoryheader {
  font-size:22px;
  font-weight:bold;
  padding-bottom:10px;
  padding-top:10px;
}
.accordion-wrapper {
    border-top:1px dotted #ccc;
}
.accordion-question {
    font-size:1.2em;
    cursor:pointer;
    padding:10px;
}
.accordion-question:hover {
    background:#efefef;
}
.accordion-question.expanded {
    background:#dfdfdf;
}
.accordion-answer {
    padding:20px;
    font-size:14px;
}
</style>
<script>
function accordionLoad() {
    $(".accordion-question").removeClass("expanded");
    $(".accordion-answer").hide();
    $(".accordion-question").bind("click", function(){
        $(this).toggleClass("expanded");
        $(this).siblings(".accordion-answer").slideToggle();
    })
}

$(document).ready(function(){
    accordionLoad();
});
</script>

Step 5: Add CEWP and Link to HTML File

  1. Add a Content Editor Web Part to the page that has the CQWP and set the Content Link to the relative path of your HTML file.
  2. Change the Web Part title to something like CSS & jQuery, set the Chrome Type to None, and then apply your changes to the web part.

The styling should now be applied and the accordion should be working.

  1. Save the page.

4 Comments

  1. Sunitha D
    Sunitha D September 13, 2017

    Thank you for sharing this Christina! I’ve successfully complete the first 3 steps. In step 4, I added the css to my already existing custom CSS file. After this step, I’ve added a new HMTL page, in which I referenced jQuery library (jQuery v1.11.3) and added accordionLoad jQuery. Added Content editor and gave give reference to the HTML page, not sure what went wrong but the expand and hide doesn’t work! However the CSS styling works… Are you able to help me please?

    • Christina Wheeler
      Christina Wheeler October 11, 2017

      Hi Sunitha, my apologies for the delayed response! Did you get this sorted out or do you still need help?

  2. Heidi Jordan
    Heidi Jordan July 19, 2017

    Yay! Thank you for sharing! I am actively working on a project with a CQWP very similar to your Speaker example. It’s going to be the coolest thing since sliced bread around here – thanks for the great ideas and resources. Can’t wait to try out the accordion styling too!

    • Christina Wheeler
      Christina Wheeler July 26, 2017

      Excellent Heidi! If you run into any issues or any need help let me know. You know where to find me. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.