jQuery UI tabbing and accordion display templates
This post is over a year old, some of this information may be out of date.
A couple of weeks ago somebody asked me if it was possible to create an accordion template from the grouping display template.
Note: here is the original grouping template post - Grouping search results with display templates for the CSWP
For these templates I made use of jQuery UI to get the accordion styling on the template. Once I had the accordion version, I also made a tabbed version so that you can choose.
Accordion template
The result of the accordion template looks like this:
Note: styling is up to you, I included the Smoothness CSS file from jQuery UI in this template.
The template can be downloaded from the SPCSR GitHub repository: jQuery UI Accordion Display Templates.
Tabbing template
The result of the template with tabs looks like this:
The template can be downloaded from the SPCSR GitHub repository: jQuery UI Tabs Display Templates.
Related articles
Creating Custom Refiner Control Display Templates for SharePoint 2013
Part 1: Create Your First Search Refiner Control Template
Part 2: Adding Refinement Actions to the Custom Search Refiner Control
Report issues or make changes on GitHub
Found a typo or issue in this article? Visit the GitHub repository to make changes or submit a bug report.
Comments
Let's build together
Manage content in VS Code
Present from VS Code