2 Years
Discussion Span
Last Post by diafol

Did you read the last bit?

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.

Just change your GoogleDoc spreadsheet


How to change GoogleDoc spreadsheet? Where to place the GoogleDoc spreadsheet? Which link do I need to change?


<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic FAQ Section w/ jQuery, YQL &amp; Google Docs | Tutorialzine Demo</title>

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



<div id="page">

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

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


<p class="createdBy"><a href="http://tutorialzine.com/2010/08/dynamic-faq-jquery-yql-google-docs/">Read &amp; Download on Tutorialzine &raquo;</a></p>

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



    // The published URL of your Google Docs spreadsheet as CSV:
    var csvURL = 'https://spreadsheets.google.com/pub?key='+

    // The YQL address:
    var yqlURL =    "http://query.yahooapis.com/v1/public/yql?q="+


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

        // Looping through all the entries in the CSV file:

            // 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:

            var dd = $(this).next();

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




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

            else $('dt:not(.opened)').click();

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

            return false;


Have you got a Google spreadsheet set up already in your Google Drive? Here's an example of a spreadsheet I've published to the web:


The line in the code:

  var csvURL = 'https://spreadsheets.google.com/pub?key='+

Change the value to the link in the image:

 var csvURL = 'https://docs.google.com/spreadsheets/d/1tF4kHBmuT6B5wMJt-20PDtxAdGgYPG2Rh4jLhzYZxF8/pub?gid=0&single=true&output=csv';

That's just from following the documentation. I've never used it.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.