Sharepoint 2013 JSLink (CSR) Not Working - sharepoint

Question

I'm trying to make our list view as an accordion by following this tutorial:
https://code.msdn.microsoft.com/office/Client-side-rendering-code-ccdb2a0e
-
I followed the tutorial:
Create a Custom List, add a new column to the list:
Name: Description
Type: Multiple lines of text
Edit the Default New Form
Go to List view web-part properties and add the JSLink file (~sitecollection/Style Library/JSLink-Samples/Accordion.js) to JS link property under the Miscellaneous Tab. Click Apply.
-
Nothing changed, so I added a Script Editor in that page and pasted js code. Then it kind of works.
Is there anything I did wrong? Thanks!

Answer 1

Unfortunately the list view is rendered properly when Description field is type of Plain text from the specified example.
To render it properly when Description field is type of Rich text or Enhanced, replace the accordionTemplate function with this one:
function accordionTemplate(ctx) {
var title = ctx.CurrentItem["Title"];
var description = ctx.CurrentItem["Description"];
// construct List Item
return "<h2>" + title + "</h2><p>" + $(description).html() + "</p><br/>";
}
Result
I would recommend you to try another approach to render List View as accordion as demonstrated in Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion article.
Key points:
jQuery IU Accordion is used for rendering List Items as collapsible
content panels
demonstrates how to load multiple JavaScript libraries (e.g. jQuery)
using JSLink property
Result