Change Sharepoint ListView To Jquery Accordion Using JSLink - CSR

What is jquery­­­ accordion?

jQuery accordion helps to display the collapsible View of SharePoint list items. Let’s get started to display the SharePoint list items using accordion control.

Navigate to SharePoint site -> create a custom list -> add some information into it.

My sample list looks like below.

 
Open SharePoint Designer.

Navigate to SiteAssets -> Create a JavaScript file.

 

Upload the required jQuery files and CSS files into Site Assets folder.

CSS Files

• demo.css
• Defaults.css

jQuery Files

• Jquery-min.js
• Accordion.js

Now, I am going to include the scripts and stylesheets into my “Accordion.js”.

//Declare the style inside a JavaScript file

Code

//Declare my custom css for design HTML
var cssId = 'myCss';
if (!document.getElementById(cssId)) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.id = cssId;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/demo.css';
    link.media = 'all';
    head.appendChild(link);
}
//Declare my custom css for design HTML
var cssId = 'myCss1';
if (!document.getElementById(cssId)) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.id = cssId;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/defaults.css';
    link.media = 'all';
    head.appendChild(link);
}

Create a function to override the list template.

Inside the function, call all the jQuery references.

(function() {
        (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/jquery.min.js"><\/script>'));
        (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/accordion.js"><\/script>'));
    }(); Create a variable Overridctx
    var overrideCtx = {};
    //Get the template of the list using variable
    overrideCtx.Templates = {}
    //Get the list Header
    overrideCtx.Templates.Header = "<div class='main'><div class='accordion'>";
    //Get the item template from the function accordionTemplate (ctx)
    overrideCtx.Templates.Item = accordionTemplate;
    //Get the list footer
    overrideCtx.Templates.Footer = “ < /div></div > ”;

Code

(function() {
    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/jquery.min.js"><\/script>'));
    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/accordion.js"><\/script>'));
    var overrideCtx = {};
    overrideCtx.Templates = {}
    overrideCtx.Templates.Header = "<div class='main'><div class='accordion'>";
    overrideCtx.Templates.Item = accordionTemplate;
    overrideCtx.Templates.Footer = "<div></div>";
    overrideCtx.OnPostRender = accordionOnPostRender;
    // This line of code tell TemplateManager that we want to change all HTML for item row render
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

Now, implement the "accordiontemplate" function .

// This function provides the rendering logic
function accordionTemplate(ctx) {
    // Return whole item html
    return "<div class='accordion-section'><a class='accordion-section-title' href='#accordion-" + ctx.CurrentItem.ID + "'>" + ctx.CurrentItem.Title + "</a><div id='accordion-" + ctx.CurrentItem.ID + "' class='accordion-section-content'><p>" + ctx.CurrentItem.Descriprion + "</p></div></div>";
}

Full Code

//Declare my custom css for design HTML
var cssId = 'myCss';
if (!document.getElementById(cssId)) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.id = cssId;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/demo.css';
    link.media = 'all';
    head.appendChild(link);
}
//Declare my custom css for design HTML
var cssId = 'myCss1';
if (!document.getElementById(cssId)) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.id = cssId;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/defaults.css';
    link.media = 'all';
    head.appendChild(link);
}
(function() {
    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/jquery.min.js"><\/script>'));
    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/accordion.js"><\/script>'));
    var overrideCtx = {};
    overrideCtx.Templates = {}
    overrideCtx.Templates.Header = "<div class='main'><div class='accordion'>";
    overrideCtx.Templates.Item = accordionTemplate;
    overrideCtx.Templates.Footer = "<div></div>";
    // This line of code tell TemplateManager that we want to change all HTML for item row render
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
// This function provides the rendering logic
function accordionTemplate(ctx) {
    // Return whole item html
    return "<div class='accordion-section'><a class='accordion-section-title' href='#accordion-" + ctx.CurrentItem.ID + "'>" + ctx.CurrentItem.Title + "</a><div id='accordion-" + ctx.CurrentItem.ID + "' class='accordion-section-content'><p>" + ctx.CurrentItem.Descriprion + "</p></div></div>";
}

Let’s include the JS file into List View webpart.

Go to the page -> Edit page-> click Edit webpart.

 

Under Miscellaneous -> link the JS file.

Click "OK" to complete.

 

Conclusion

You are now able to render any kind of HTML design using JSLink Client side rendering into SharePoint list and libraries.