Change Sharepoint ListView To Jquery Accordion Using JSLink - CSR

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.

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 myAccordion.js”.

//Declare the style inside a JavaScript file

Code

  1. //Declare my custom css for design HTML  
  2. var cssId = 'myCss';  
  3. if (!document.getElementById(cssId)) {  
  4.     var head = document.getElementsByTagName('head')[0];  
  5.     var link = document.createElement('link');  
  6.     link.id = cssId;  
  7.     link.rel = 'stylesheet';  
  8.     link.type = 'text/css';  
  9.     link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/demo.css';  
  10.     link.media = 'all';  
  11.     head.appendChild(link);  
  12. }  
  13. //Declare my custom css for design HTML  
  14. var cssId = 'myCss1';  
  15. if (!document.getElementById(cssId)) {  
  16.     var head = document.getElementsByTagName('head')[0];  
  17.     var link = document.createElement('link');  
  18.     link.id = cssId;  
  19.     link.rel = 'stylesheet';  
  20.     link.type = 'text/css';  
  21.     link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/defaults.css';  
  22.     link.media = 'all';  
  23.     head.appendChild(link);  
  24. }  

Create a function to override the list template.

Inside the function, call all the jQuery references.

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

Code

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

Now, implement the "accordiontemplate" function .

  1. // This function provides the rendering logic  
  2. function accordionTemplate(ctx) {  
  3.     // Return whole item html   
  4.     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>";  
  5. }  

Full Code

  1. //Declare my custom css for design HTML  
  2. var cssId = 'myCss';  
  3. if (!document.getElementById(cssId)) {  
  4.     var head = document.getElementsByTagName('head')[0];  
  5.     var link = document.createElement('link');  
  6.     link.id = cssId;  
  7.     link.rel = 'stylesheet';  
  8.     link.type = 'text/css';  
  9.     link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/demo.css';  
  10.     link.media = 'all';  
  11.     head.appendChild(link);  
  12. }  
  13. //Declare my custom css for design HTML  
  14. var cssId = 'myCss1';  
  15. if (!document.getElementById(cssId)) {  
  16.     var head = document.getElementsByTagName('head')[0];  
  17.     var link = document.createElement('link');  
  18.     link.id = cssId;  
  19.     link.rel = 'stylesheet';  
  20.     link.type = 'text/css';  
  21.     link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/defaults.css';  
  22.     link.media = 'all';  
  23.     head.appendChild(link);  
  24. }  
  25. (function() {  
  26.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/jquery.min.js"><\/script>'));  
  27.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/accordion.js"><\/script>'));  
  28.     var overrideCtx = {};  
  29.     overrideCtx.Templates = {}  
  30.     overrideCtx.Templates.Header = "<div class='main'><div class='accordion'>";  
  31.     overrideCtx.Templates.Item = accordionTemplate;  
  32.     overrideCtx.Templates.Footer = "<div></div>";  
  33.     // This line of code tell TemplateManager that we want to change all HTML for item row render   
  34.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);  
  35. })();  
  36. // This function provides the rendering logic   
  37. function accordionTemplate(ctx) {  
  38.     // Return whole item html   
  39.     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>";  
  40. }  

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.