Quantcast
Channel: SharePoint 2013 - Development and Programming forum
Viewing all articles
Browse latest Browse all 7589

Accordion of SharePoint cusom list - description column with 'Enhanced text'

$
0
0

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.


Viewing all articles
Browse latest Browse all 7589

Trending Articles