Hi , Please help me creating accordion using SharePoint custom list having description column with 'enhanced text'. I tried few solutions but it worked only for Plain text.
Tried the below code but it doesn't work with enhanced text type in multi line of text with enhanced text property:
<script>
(function hello() {
// jQuery library is required in this sample
// Fallback to loading jQuery from a CDN path if the local is unavailable
(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));
// Create object that have the context information about the field that we want to change it's output render
var accordionContext = {};
accordionContext.Templates = {};
// Be careful when add the header for the template, because it's will break the default list view render
accordionContext.Templates.Header = "<div id='accordion1'>";
accordionContext.Templates.Footer = "</div>";
// Add OnPostRender event handler to add accordion click events and style
accordionContext.OnPostRender = accordionOnPostRender;
// This line of code tell TemplateManager that we want to change all HTML for item row render
accordionContext.Templates.Item = accordionTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(accordionContext);
})();
// This function provides the rendering logic
function accordionTemplate(ctx) {
var title = ctx.CurrentItem["Title"];
var description = ctx.CurrentItem["Description"];
// Return whole item html
return "<h2>" + title + "</h2><p>" + description + "</p>";
}
function accordionOnPostRender() {
// Register event to collapse and uncollapse when click on accordion header
$('#accordion1 h2').click(function hello() {$(this).next().slideToggle();}).next().hide();
$('#accordion1 h2').css('cursor', 'pointer');
}</script><script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"></script>
Please help.