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

  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.