/* FAQ v1.1 Plugin A dynamic FAQ builder using the power of jQuery. Updated December 3rd, 2008 - Changed the span to a div - Symantically correct - Added an incrementor in case of a duplicate header name - Changed the regular expression to anything other than alphanumeric - Corrected the syntax to accept the faqHeader variable Example HTML Syntax: --------------------

Title 1

Some content

Title 2

Some content
Example Script Syntax: -------------------- Visit http://www.dscoduc.com for questions, comments, issues. Creative Commons Attribution-Share Alike */ (function($) { $.fn.makeFAQ = function(options) { var defaults = { indexTitle: "Index", // Change to whatever you want to be displayed faqHeader: ":header", // default grabs any header element - h1,h2, etc... displayIndex: true // Display Index }; var options = $.extend(defaults, options); return this.each(function() { // load the parent object only once var $obj = $(this); // wrap parent in faqRoot div $obj.wrap("
"); // Add index div if(options.displayIndex) { $obj.before("

" + options.indexTitle + "

"); }; // Get header children using the obj ID var $faqEntries = $obj.children(options.faqHeader); // counting integer - ensures unique id names var i = 0; // enumerate through each entry and perform several tasks $faqEntries.each(function () { // load object only once var $entry = $(this); // Get entry name var entryName = $entry.text(); // strip whitespaces and special characters var entryNameSafe = entryName.replace(/\W/g,"") + i; // Increment counter i++; // build index line for entry var itemHTML = "
  • " + entryName + "
  • "; // append the index line to the index $('#faqindex ul').append(itemHTML); // add click event for index entry if(options.displayIndex) { $('#' + entryNameSafe.toString() + 'Index').click( function(){ // slide down the selected index before jumping to the bookmark $('#' + entryNameSafe.toString()).next('span').slideDown('fast'); // make sure it gets the faqopened class $('#' + entryNameSafe.toString()).addClass('faqopened'); }); }; // add class to faq entry content $entry.next("div").addClass('faqcontent'); // add title, name and id to entry $entry.attr({ title: "Click to expand/collapse", name: entryNameSafe, id: entryNameSafe }) // add class .addClass("faqclosed") // Add click event to entry .click( function() { $entry.next('div').slideToggle('fast'); $entry.toggleClass('faqopened'); }) // Collapse the span tag of the entry .next('div').css({ display: "none" }); }); // end enumeration of each faq entry }); // end this each }; // end function })(jQuery);