Overview
We have already discussed how to create Accordion List View in SharePoint 2010 in this post.
SharePoint 2013 introduces client side rendering framework for List View that allows to define the rendering logic of SharePoint list views using HTML/JavaScript. So, let’s discuss how to create Accordion List View in SharePoint 2013 based on client-side rendering.
For demonstration purposes we will create FAQ List based on Custom List. Default view for our list will look like this
And our goal here to customize it in such a way list items will be displayed in accordion as shown below
Implementation
In order to simplify our solution we restrict ourselves to the creation of client side rendering template only and applying it to the existing List View. If you are interested how to build custom solution for Accordion List please follow my post about creating Accordion List View for SharePoint 2010.
Create Custom List for FAQ
FAQ List is based on Custom List. For storing questions we will utilize Title field, for Answers we will create new field with Note type
Create client-side rendered view for Accordion
Client-side rendered view of an FAQ list is presented below
Customize a List View
The last step is to apply client-side rendering template to existing view. Let’s first add FAQ List instance on on page, after that we only need to specify JSLink property value for List View
Please note that actually three JavaScript files have been specified(the first two are jQuery libraries) for JSLink property. All of them are stored in my case in hive, but of course they could be stored not only in file system.
