Dynamic FAQ Section w/ jQuery, YQL & Google Docs

You are here: Free PHP » PHP Tutorials » Dynamic FAQ Section w/ jQuery, YQL & Google Docs

In this tutorial, we are making a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.

The best aspect of this solution, is that you can change the contents of the FAQ section from within Google Docs – just edit the spreadsheet. You can even leverage the rest of Google Docs’ features, such as collaborative editing. This way, a small team can support the FAQ section without the need of a dedicated CMS solution.

Thanks to Chris Ivarson for designing the Google Docs icon, used in the featured illustration of this tutorial.

Google Docs

Before starting work on the FAQ section, we first need to create a new Google Docs Spreadsheet. As you probably already have an account with Google (if not, create one), we’ll move straight to the interesting part.

In a blank spreadsheet, start filling in two columns of data. The first column should contain the questions, and the second one the answers, that are going to become entries in your FAQ section. Each FAQ goes on a separate line. You can see the one that I created here.

After this, click Share > Publish as webpage and choose CSV from the dropdown list. This will generate a link to your spreadsheet in the form of a regular CSV file, which we will use later.

The HTML

The first step in developing the script is the markup. The #page div is the main container element. It is the only div with an explicit width. It is also centered in the middle of the page with a margin:auto, as you will see in the CSS part of the tut.

faq.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="page">

    <div id="headingSection">
    	<h1>Frequently Asked Questions</h1>
        <a class="button expand" href="#">Expand</a>
    </div>

    <div id="faqSection">
    	<!-- The FAQs are inserted here -->
    </div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

The stylesheet is included in the head of the document, and the jQuery library and our script.js are included at the bottom. All of these are discussed in detail in the next sections of this tutorial.

The #headingSection contains the h1 heading, and the expand/collapse button. After it comes the #faqSection div, where the FAQ entries are inserted after jQuery fetched the contents of your Google Docs Spreadsheet.

The FAQ entries are organized as a definition list structure (dl). This is one of the least used HTML elements, but is perfect for our task. Here is how it looks once jQuery adds it to the page.

faq.html

<dl>
    <dt><span class="icon"></span>How does this FAQ section work?</dt>
    <dd>With the help of jQuery and YQL, this script pulls the latest data ..</dd>

    <dt><span class="icon"></span>Can you modify it?</dt>
    <dd>This is the best part of it - you can change the contents ..</dd>
</dl>

The dl element holds a dt for each question and a dd for each answer. The dd elements are hidden with display:none, and are only shown with a slideDown animation once the respective dt is clicked.

Dynamic FAQ Section

The CSS

The styles, (held in styles.css) are pretty straightforward and self-explanatory. As mentioned above, only the #page div, which acts as the main container, is explicitly assigned a width. It is also centered in the middle of the page with an auto value for the left/right margins.

styles.css – Part 1

#page{
	width:753px;
	margin:50px auto;
}

#headingSection{
	background-color:#7b8b98;
	padding:40px;
	padding-left:60px;
	position:relative;
	border:1px solid #8b9ba7;
	border-bottom:none;
}

#faqSection{
	background:url('img/faq_bg.jpg') repeat-y #fff;
	padding:20px 90px 60px 60px;
	border:1px solid white;
	text-shadow:1px 1px 0 white;
}

h1{
	color:#fff;
	font-size:36px;
	font-weight:normal;
}

/* The expand / collapse button */

a.button{
	background:url('img/buttons.png') no-repeat;
	width:80px;
	height:38px;
	position:absolute;
	right:50px;
	top:45px;
	text-indent:-9999px;
	overflow:hidden;
	border:none !important;
}

a.button.expand:hover{ background-position:0 -38px;}
a.button.collapse{ background-position:0 -76px;}
a.button.collapse:hover{ background-position:0 bottom;}

We are using a single anchor tag for both the expand and the collapse button, by assigning it either the expand or the collapse CSS class. These classes determine which parts of the background image are offset into view. The background image itself is four times the height of the button, and contains a normal and a hover state for both the expand and collapse button versions.

styles.css – Part 2

/* Definition Lists */

dt{
	color:#8F9AA3;
	font-size:25px;
	margin-top:30px;
	padding-left:25px;
	position:relative;
	cursor:pointer;
	border:1px solid transparent;
}

dt:hover{ color:#5f6a73;}

dt .icon{
	background:url('img/bullets.png') no-repeat;
	height:12px;
	left:0;
	position:absolute;
	top:11px;
	width:12px;
}

dt.opened .icon{ background-position:left bottom;}

dd{
	font-size:14px;
	color:#717f89;
	line-height:1.5;
	padding:20px 0 0 25px;
	width:580px;
	display:none;
}

When a definition title (dt) is clicked, its respective dd is expanded into view (as you will see in the next section). With this, the dt is also assigned an opened class. This class helps jQuery determine which FAQ’s are opened, and in the same time affects the styling of the small bullet on the left of the title.

FAQ expanded

The jQuery

Moving to probably the most interesting part of the tutorial. If you’ve been following the tutorials on this site, you’ve probably noticed that YQL finds its way into a lot of the tutorials here. The main reason behind this, is that YQL makes possible for developers to use it as a proxy for a wide range of APIs, and implement a diverse functionality entirely in JavaScript.

Today we are using YQL to fetch our Google Spreadsheet as CSV and parse it, so that it is available as a regular JSON object. This way, we end up with a free and easy to update data storage for our simple app.

script.js

$(document).ready(function(){

	// The published URL of your Google Docs spreadsheet as CSV:
	var csvURL = 'https://spreadsheets.google.com/pub?key='+
			'0Ahe1-YRnPKQ_dEI0STVPX05NVTJuNENhVlhKZklNUlE&hl=en&output=csv';

	// The YQL address:
	var yqlURL =	"http://query.yahooapis.com/v1/public/yql?q="+
			"select%20*%20from%20csv%20where%20url%3D'"+encodeURIComponent(csvURL)+
			"'%20and%20columns%3D'question%2Canswer'&format=json&callback=?";

	$.getJSON(yqlURL,function(msg){

		var dl = $('<dl>');

		// Looping through all the entries in the CSV file:
		$.each(msg.query.results.row,function(){

			// Sometimes the entries are surrounded by double quotes. This is why
			// we strip them first with the replace method:

			var answer = this.answer.replace(/""/g,'"').replace(/^"|"$/g,'');
			var question = this.question.replace(/""/g,'"').replace(/^"|"$/g,'');

			// Formatting the FAQ as a definition list: dt for the question
			// and a dd for the answer.

			dl.append('<dt><span class="icon"></span>'+
			question+'</dt><dd>'+answer+'</dd>');
		});

		// Appending the definition list:
		$('#faqSection').append(dl);

		$('dt').live('click',function(){
			var dd = $(this).next();

			// If the title is clicked and the dd is not currently animated,
			// start an animation with the slideToggle() method.

			if(!dd.is(':animated')){
				dd.slideToggle();
				$(this).toggleClass('opened');
			}

		});

		$('a.button').click(function(){

			// To expand/collapse all of the FAQs simultaneously,
			// just trigger the click event on the DTs

			if($(this).hasClass('collapse')){
				$('dt.opened').click();
			}
			else $('dt:not(.opened)').click();

			$(this).toggleClass('expand collapse');

			return false;
		});

	});
});

It may not be clear from the code above, but jQuery sends a JSONP request to YQL’s servers with the following YQL query:

SELECT * FROM csv
WHERE url='https://spreadsheets.google.com/...'
AND columns='question,answer'

CSV is a YQL table, which takes the URL of a csv file and a list of column names. It returns a JSON object with the column names as its properties. The script then filters them (stripping off unnecessary double quotes) and inserts them as a definition list (DL) into the page.

With this our dynamic FAQ section is complete!

Customization

To use this script with your own spreadsheet, you only need to edit the csvURL variable in script.js, and replace it with the CSV URL of your spreadsheet. You can obtain this address from Share > Publish as webpage > CSV dropdown. Also, be aware that when you make changes to the spreadsheet, it could take a few minutes for the changes to take effect. You can speed this up by clicking the Republish now button, found in the same overlay window.

Obtaining the CSV URL

Final Words

You can use the same technique to power different kinds of dynamic pages. However, this implementation does have its shortcomings. All the content is generated with JavaScript, which means that it will not be visible to search engines.

To guarantee that your data will be crawled, you can take a different route. You could use PHP, or other back-end language, to fetch and display the data from YQL in a fixed interval of time – say 30 minutes (or even less frequently, if you don’t plan to update the data often).

Be sure to share your suggestions in the comment section below.

Published on: Wednesday - 11 August 2010
Categories: PHP Tutorials Tags: learn , php , rss , Tutorial

Comments are closed.