We have already discussed how to create Accordion List View in SharePoint 2010 in this post.
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
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