With JSLink you have the ability to quickly and easily change how a list views and forms are rendered. Together with jQuery, CSS and even JavaScript you can present a SharePoint list in endless ways. In this example I will create a FAQ list with a accordion display style.

Solution

1. Create a custom list called FAQ with a title and description field (Multiple Lines of Text).
2. If required changed the fields to be shown.
3. Create a page and add the FAQ web part to the page.
4. Create the JSLink file called AccordionView.js
5. Create the JavaScript file called accordion.js
6. Create the CSS file called accordion.css
7. Save the background image to SharePoint.
   • ArrowClosed
   • ArrowOpen
8. Change the background-image URLs if needed.
9. Link the JSLink to the web part to load the AccordionView.js.
10. Add the accordion.js and accordion.css to the page, for example by using a Content Editor web part.
11. Add jQuery to the page.
12. Make sure that jQuery is loaded before the other JavaScript. Errors might otherwise be generated.