Make dinamic FAQ page with CSS, Jquery and Google Docs

 In the next tutorial you will learn how to create a FAQ page using CSS, Jquery and Google Docs Spreadsheets.

The script used in this tutorial will load the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.

This is a perfect way to create a FAQ page because you can change the content by just editing the spreadsheet in Google Docs.

First you'll have to create a spreadsheet. Probably already have an account with Google (if not, create one).
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  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.


Then:


 1. Log in to your dashboard--> Design- -> Edit HTML


2. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:

#page{
width:550px;
margin:10px auto;
}

#headingSection{
background-color:#8b9ba7;
padding:0px;
padding-left:60px;
position:relative;


}

#faqSection{
background:url('http://img29.imageshack.us/img29/9195/faqbg.jpg') repeat-y #fff;
padding:5px 90px 60px 60px;
border:1px solid white;
text-shadow:1px 1px 0 white;
}

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

/* The expand / collapse button */

a.button{
background:url('http://img41.imageshack.us/img41/4628/buttonsh.png') no-repeat;
width:80px;
height:38px;
position:absolute;
right:40px;
top:15px;
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;}

/* Definition Lists */

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

dt:hover{ color:#5f6a73;}

dt .icon{
background:url('http://img580.imageshack.us/img580/3774/bulletsf.png') no-repeat;
height:12px;
left:0;
position:absolute;
top:8px;
width:12px;
}

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

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

4. Now find the </head> tag and before it paste the code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(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;
});

});
});
//]]>
</script>

If you have Jquery instaled on your template delete the red line.
The blue line is the link to the Google docs spreadsheet, replace it with your own one.

5. Save the template.

6. The next step is to create a new static page on your blog. After you have created the page edit it and make sure the editor is in HTML mode. Paste the next code and save the page:

<div id="page">

<div id="headingSection">

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

<div id="faqSection">
</div>

</div>

7. Done. Now you have a beautiful FAQ page on your blog.

DEMO