Change Sharepoint ListView To Jquery Accordion Using JSLink

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.

7 Comments

Join the conversation! Your thoughts help the community grow.

Rockie R6y ago
Your mashup of js/css is horrible, but finally it works. Thanks! Best regards, Gennady
- Vinodh Narayanan6y ago
  Oh do let me know if you have any concern about the code
girish8y ago
Just checking - there are 2 file with same name .. accordion.js right ?
girish8y ago
Hello Vinod - I am unable to reproduce the same result
venkat Kotaiah9y ago
Osmmm..thanks for sharing
venkat Kotaiah9y ago
Hi vinod we can find css file for above blog
- Vinodh Narayanan9y ago
  In the above article you can see the download code accordion.rar