SharePoint Online: Change SharePoint ListView To Jquery Accordion Using JSLink Client Side Rendering

sharepoint ListView Jquery Accordion jslink csr

Here we will discuss how we can change SharePoint ListView To Jquery Accordion Using JSLink in SharePoint online. We will change SharePoint list view to collapsible look and feel using JSLink.

What is a jquery accordion?
Jquery accordion helps to display the contents in a collapsible view.
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 look like below:

sharepoint ListView Jquery Accordion
sharepoint ListView Jquery Accordion

Open SharePoint designer. Navigate into SiteAssets -> Create a Javascript file

sharepoint ListView Jquery Accordion jslink
sharepoint ListView Jquery Accordion jslink

 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 am going to include the scripts and stylesheets into my “Accodion.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 function accordiontemplate
// 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:

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

sharepoint ListView Jquery Accordion jslink csr
sharepoint ListView Jquery Accordion jslink csr

SharePoint online Change SharePoint ListView To Jquery Accordion Using JSLink
Click Ok to complete

sharepoint online ListView Jquery Accordion jslink csr
sharepoint online ListView Jquery Accordion jslink csr

You may like following jslink in SharePoint 2013 tutorials:



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

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials: