FAQs in SharePoint using CSR (Accordion)

In this article, I will discuss something really cool way to create FAQs in SharePoint using CSR (Accordion)

Client side rendering is so awesome once you play around with the code and implement it in the list.

The best part of the CSR is, you just work on some couple of JS files and upload it to your library and done.

So let’s start the process of creating a FAQ page.

Final page will look like:

animation

 

Step 1: Create a list and give it a name, it can be anything. I have given FAQ List.

If you don’t know how to create a list just follow this article here.

Step 2: Create a column name Description, make sure you use Description as a column name or change the code which I will provide in this article.

If you don’t know how to create a column, you can follow this article here. Also, put some content on the list.

listcontent

 

Step 3: Copy the JS code in master page gallery or style library, make sure you change the content type to JavaScript Display Template. Also, you can give any name to this JavaScript file.

Don’t know how to add JavaScript Display template and then upload the JS file, follow this article here, I have explained the steps in detail.

http://letsdosharepoint.com/wp-content/uploads/2016/10/FAQ-code.png

In this JS file, I have put ID and title together and have appended bracket so that it looks good.

Step 4: Create a page, name anything you like and then add a list web part which we created i.e FAQ List

Step 5: Go to edit page option and then edit web part setting, under miscellaneous look for JS Link property and give the reference of your JavaScript file that you saved in the library and  jquery-1.7.2.min.JS which you can download from the internet.

jslink

Note: jquery1.7.2.min.js is important, sometimes it doesn’t work without it. In my case, I had to reference it in SharePoint Online. Also, make sure you disable minimal download strategy feature.

So I hope you find it easy to implement, let me know in the comments if you have any issues.

 

Digiprove sealCopyright secured by Digiprove © 2016

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz

Enjoy this blog? Please spread the word :)