This SharePoint tutorial explains, how to create a jQuery accordion using the content search web part (CSWP) to display dynamic data in the SharePoint server 2013. In the first step, let’s create the Authoring and Publishing Site Collections.
Authoring Site collection allows authors to manage their website content while the Publishing Site collection reviews the content from the authoring site collection.
jquery accordion SharePoint content search webpart
Open the Authoring Site Collection. Create a list named “Accordion” that contains the title and Description.
Let’s go and create a control and a template to display the items.
- Control Template: It provides the overall structure (layout) of the HTML elements along with start and end tags.
- Item Template: It renders the items from the list, and contains text and pictures.
Now, let’s create two display templates for displaying a bootstrap carousel menu control and a menu item.
Code – Accordion Control Template
Upload the script and CSS into the style library.
Add the scripts and CSS into the Control template.
<script>
$includeScript(this.url, "~sitecollection/Style%20Library/Accordion/jquery-ui.css");
$includeCSS(this.url, "~sitecollection/Style%20Library/Accordion/jquery-1.12.4.js");
$includeScript(this.url, "~sitecollection/Style%20Library/Accordion/jquery-ui.js");
</script>Now, let’s define the HTML layout to the Control Template
<div id="accordion">
_#= ctx.RenderItems(ctx) =#_
</div>The full code looks like the following.
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882″>
<head>
<title>Accordion Control</title>
<!–[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Display a menu Item</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>
<mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://technologygeeks/sites/publishing/_catalogs/masterpage/Display Templates/Content Web Parts/banner/bannercontrol.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]–>
</head>
<body>
<script>
$includeScript(this.url, "~sitecollection/Style%20Library/Accordion/jquery-ui.css");
$includeCSS(this.url, "~sitecollection/Style%20Library/Accordion/jquery-1.12.4.js");
$includeScript(this.url, "~sitecollection/Style%20Library/Accordion/jquery-ui.js");
</script>
<div>
<!–#_if (!$isNull(ctx.ClientControl) && !$isNull(ctx.ClientControl.shouldRenderControl) && !ctx.ClientControl.shouldRenderControl()){return "";}
ctx.ListDataJSONGroupsKey = "ResultTables";
ctx["CurrentItems"] = ctx.ListData.ResultTables[0].ResultRows;
var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();
AddPostRenderCallback(ctx, function() {
$.getScript(siteURL + "");
$( function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
icons: icons
});
$( "#toggle" ).button().on( "click", function() {
if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
$( "#accordion" ).accordion( "option", "icons", null );
} else {
$( "#accordion" ).accordion( "option", "icons", icons );
}
});
});
});
_#–>
<div id="accordion">
_#= ctx.RenderItems(ctx) =#_
</div>
<button id="toggle">Toggle icons</button>
</div>
</body>
</html>Let’s go to the Item template and declare the managed properties and necessary variables.
<!–#_
var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();
var itemIdx = ctx.CurrentItemIdx+1;
var title = $getItemValue(ctx, "Title");
var desc = $getItemValue(ctx, "Description");
var esActive ="";
_#–>Render the HTML structure with the list item information.
<!— HTML Goes Here –>
<h3>_#= title =#_</h3>
<div>
<p>_#= desc =#_</p>
</div>Overall Item template code looks like the following.
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882″>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1″>
<title>Accordion Item</title>
<!–[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Displays an Accordion Item.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:ManagedPropertyMapping msdt:dt="string">’Title’:’Title’,’Description’:’Description'</mso:ManagedPropertyMapping>
<mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>
<mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://technologygeeks/sites/publishing/_catalogs/masterpage/Display Templates/Content Web Parts/banner/BannerItem.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]–>
</head>
<body>
<div>
<!–#_
var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();
var itemIdx = ctx.CurrentItemIdx+1;
var title = $getItemValue(ctx, "Title");
var desc = $getItemValue(ctx, "Description");
_#–>
<!— HTML Goes Here –>
<h3>_#= title =#_</h3>
<div>
<p>_#= desc =#_</p>
</div>
</div>
</body>
</html>Upload the display template under Site Settings – > Master page and page layouts -> Display Templates -> Content Web Parts.
Now going to insert some data into the Accordion list from the authoring site collection.
Run the search service application Crawl now.
Now, let’s go to the SharePoint page.
Add a Content Search Web Part into this page.
Map a search query to get the result from the authoring site collection.
Click Edit Web Part -> change query.
Provide a number of items to display.
Choose the display templates.
Click OK. Under the property mapping section, map the managed properties of the title, description.
Click OK to complete the setup.
The following is the final result.
Click on the second topic.
You may like following SharePoint tutorials:
- Create a chart using chart.js in SharePoint Server 2013/2016
- Bind SharePoint list data using jQuery datatable using content search web part in SharePoint
- JQuery Tabs using content search web part in SharePoint 2013
- Ignite UI Data grid in SharePoint Online using AJAX
- Convert an HTML page into a SharePoint master page using Design manager
- Save list as a template in SharePoint 2013/2016/Online
- How to open Office Web Apps (Word, Excel, PowerPoint) documents in Iframe
- File viewer web part in SharePoint Online modern site
- How to Create List View on the Fly in SharePoint Online modern experience
- SharePoint Online modern list properties web part
- SharePoint Online modern list column formatting using JSON
- Customize Header, Footer, and Navigation in SharePoint Online Communication Site
Note:
The result has been displayed using Search Service. You need to run the Search Service application. After adding the content into the SharePoint list, the result will be successfully displayed on the page.
Accordion Reference: https://jqueryui.com/
