I was looking for a simple jQuery FAQ scripts out there for adding to my personal website and I couldn’t find one which is simple to configure and has no fancy styles. I’ve found a couple of fancy FAQ scripts but I didn’t want to add a fancy script to my personal website. While I was browsing some tutorial site, I got this idea noticed to fetch the contents directly from Google Docs and display it as a FAQ on the web page. This was a good idea because I don’t have to edit the html file each time for adding new questions and answers. As I was learning the jQuery Plugin Development, I’ve decided to write this as a plugin and here it comes.
The Questions and Answers that you see on those pages are taken directly from my Google Docs
Before you start installing the plugin, make a FAQ page on Google Docs.
Login to your Google Docs account at https://docs.google.com/ and create a new Spreadsheet
You can see many columns there. We only need column A and B.
Column A should contain the questions and column 3 should contain the answers. You can also include html in the answer column. Save the spreadsheet and goto File – > Publish to the Web and click on the publish button. On the same page, you can see a link generator from where you will be able to get the CSV link for that spreadsheet. Copy the link.
Installation of the script is pretty easy.
First include jQuery latest version in the htmltag. Skip this if you are already included it. jQuery 1.7 is the latest while writing this article. Then include jquery.gfaq.js below the jQuery file
Next, add a div tag with the name “faq” or anything that you wish and add the below jQuery code in the script tag next to it.
csv : ‘https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AlsQ1nfxAXPfdHJNb01aeEU2UnFDZVRZOHZiUW1yd0E&output=csv’,
That is all. There are some parameters you should take care of here.
csv: This is the CSV file shared on Google Docs. You may also use a csv file from other location.
hideOthers: Set this to true if you want to show only the selected questions answer and hide all other answers. false by default.
heading: The heading type that you want to set for the Questions. Example, h1, h2, h3, h4 and h5. h3 is default.
Now you are ready to go. The script will fetch the questions and answers from the Google Docs and display on your web page. If you ever want to add/edit the questions/answers, you just login to your Google Docs and edit the spreadsheet. The changes will be automatically applied on your web page.
This plugin is originally written for my own website and the page can be found at
http://www.vivekv.com/v3/ -> Goto Plugins page.