We're looking to implement a Q&A section on one of our SharePoint sites. To make interaction easier on end users I've been looking for a way display list content differently.

I stumbled upon an elegant solution by Vadim Gremyachev:


I have attempted to implement this solution without any success.


  1. Loaded the AccordionViewTemplate.js onto the site
  2. Located the JQuery.js and JQuery.ui.js files already on our site collection
  3. Created a custom list that also uses "Title" and "Answer"
  4. Added the list as a web part app and updated the JS Link field to point to the 3 js files

Have I used incorrect SP Link syntax? I have tried "~/", "../" and "/" ? Do I need to make changes to AccordionViewTemplate.js?

  • It seems like your issue is with the link URL. Can you update the question with the file location (where the files are uploaded) and the location of the page that has the list view. – Amal Hashim Jan 7 '15 at 16:45
  • Providing any errors or describing the specific behavior that leads you to believe your attempt is not working can greatly help others troubleshoot the issue as well. – John-M Jan 7 '15 at 16:59
  • Unfortunately I'm on a system where I can't access Google Chrome, so I have to work through IE 11. My files are located on [homepage]/sites/[main site]/[site]/SiteAssets/Forms/AllItems.aspx I'm using following code in JS Link: ~/SiteAssets/jquery.js|~/SiteAssets/jquery.ui.js|~/SiteAssets/AccordionViewTemplate.js As far as I can tell through F12 debugger the scripts show, but I'm unable to tell if they are executing. – David Jan 13 '15 at 16:20

You can validate if the JS files are loading using the browser tools.

Open the page with your list instance on it and then open the browser tools (hit F12 key if you are windows machine). What you are looking for are the source files. Each browser is a little different (Chrome has a source tab, but FireFox has it under Debugger tab). You can also look at the network tab and it will show you which files are being loaded.

If you see one or all of them are not loading, then I would look at how you are formatting the JS Link, and the actual location of the files. Try adding one at a time and checking if it loads. You can make that link a little easier by loading the JQuery files from the display template, then you only need to point to the actual template file.

IF, they are loading and you are still not seeing the correct behavior, check that the column names you are referencing are correct. They have to match in the display template or it won't be applied. You can check by setting a break point in the display template, and then from the browser console access the list item object and check the references it returns. If you see different columns being returned you need to update your reference to one of those.

If you are not familiar with the browser tools mentioned above, I recommend you start with Chrome there are many resources on using the developer tools.

| improve this answer | |

Going by the information you have provided:

  1. If you wish to use SharePoint's tokens, ~site/_rest_of_the_path for the current web or ~sitecollection/_rest_of_the_path for the current site collection;
  2. Check your BaseViewID inside your script. Make sure the value corresponds to the view you are trying to customize. If you could provide any error messages you get or describe the behavior, the easier for us to recommend solutions.
| improve this answer | |
  • I updated the URLs to point to ~/sites/[name]/[name]/SiteAssets/[file].js and nothing seems to be happening. I attempted to remove the ~, nothing. If I replace with .. (as I had to on another page for it to work) then the page won't even load. I'm trying to check on the debugger tab of IE to see if the script is loading but unsure how. Should I expect to see it on the "Open Document" drop down? – David Jan 14 '15 at 14:32

I've been struggling to learn how to use JSLink also, and have had trouble figuring out if my script file was being included on the page. Per an article by Martin Hatch (http://www.martinhatch.com/2013/08/jslink-and-display-templates-part-1.html): "In a nut-shell JSLink simply means “link to my JavaScript file”. So, I created a simple js file that contained a single function [function hello(){alert("Hi");}], called it hello.js, and uploaded it to a document library called "js". I created a test page with a button on it that would fire my function. My first test was to add a reference to my function in a Script Editor web part. After confirming that worked, I removed that Script Editor web part, added a list view web part (doesn't matter which list), and put my script reference into the JSLink box for that list view. At first, my button would not fire my function, so I played with the path and ended up getting it to work by using "~sitecollection/Sandbox/koh/js/hello.js".

So, I can now at least get my JSLink referenced javascript file to load on the page.

I hope this helps you.

| improve this answer | |

Not sure it's still relevant, but I was trying to do the same thing yesterday. After a few hours of googling, I found the following page: http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=43

It's really easy to implement - there's a step-by-step video tutorial there as well.

The script

    <!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme --> 
    <link  type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" /> 
    <!-- Reference jQuery on the Google CDN --> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <!-- Reference jQueryUI on the Google CDN --> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<script type="text/javascript">
     jQuery(document).ready(function($) {
         //Put the WebPart Title for all the Web Parts you wish
         //to put into the jQuery UI Accordion into the array below.

    function HillbillyAccordian(webPartTitles)
        for(index in webPartTitles)
            var title = webPartTitles[index];
                if ($(this).text() == title){
                    var webPart = $(this).hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");
                    if ($(webPart).contents().html() != undefined)
                         webPart = $(webPart).contents();
        $("#accordian").accordion({ heightStyle: "content" });

<div id="accordian"></div>

The Tutorial

| improve this answer | |
  • You can share information from the link. – Asad Refai Jun 12 '18 at 9:48
  • Sorry, I don't understand your comment. Are you unable to open the hyperlink? – AnDrej_B Jun 12 '18 at 12:00
  • It would be very good if you add content from other links on this post. As in future there is risk that links may break.. – Asad Refai Jun 12 '18 at 12:14
  • Ah, got you - didn't want to add the whole code here as it's quite long, but yeah, will try to add it later – AnDrej_B Jun 12 '18 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.