Alert This post is over a year old, some of this information may be out of date.

jQuery UI tabbing and accordion display templates

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:

Show image Accordion display template
Accordion display template

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:

Show image Tabbed display template
Tabbed display template

The template can be downloaded from the SPCSR GitHub repository: jQuery UI Tabs Display Templates.

Comments

Back to top