Show SharePoint list view data in accordion view using jslink

sharepoint ListView Jquery Accordion jslink csr
SharePoint deveopment training course

This SharePoint customization tutorial, we will discuss how to show SharePoint Online list view data in accordion view using JSLink in SharePoint Online/2013/2016.

We will see how to change the SharePoint List view to jQuery accordion using JSLink in SharePoint Online. We will change the SharePoint list view to a collapsible look and feel using JSLink.

jQuery accordion in SharePoint

jQuery accordion helps to display the contents in a collapsible view. We can use a jQuery accordion to display the SharePoint list view in accordion view.

Show SharePoint list view data in accordion view using jslink

Let’s get started to display the SharePoint list view items using accordion control. Navigate to SharePoint site -> Create a custom list -> Add some information into it

My sample SharePoint list looks like below:

show list data in accordion view using jslink

Open SharePoint designer 2013, Navigate into Site Assets -> Create a Javascript file.

sharepoint 2013 accordion list web part

Upload below required jQuery and CSS files into the site assets folder in SharePoint Online/2013/2016 site.

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”

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 and 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 accordion template

// 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 Accordion.js

//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 the SharePoint list view webpart. Go to the page -> Edit page -> Click Edit webpart. And under miscellaneous -> link the Js file.

sharepoint 2013 customize list view

Then Click Ok to complete and Save the page.

sharepoint list view jquery accordion

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

You may like following jslink in SharePoint 2013 tutorials:

This SharePoint tutorial, we learned how to display SharePoint list view data in accordion view using jslink. We can use the same code to show list data in accordion view using jslink in SharePoint Online or SharePoint 2013/2016.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope