There are lot of such FAQs toggle scripts available and you will be asking why I wrote a new one. The reason is simple to make the script work with different and most used html structures. Most of the time user will be entering data from CMS and we have to make the script working with that. This script is customized to work with content management system so any HTML header tag(h1 -h6) followed by a content tag will do . Any bugs please report 
.
Code :
jQuery.fn.faqs=function(options) { var settings = {showFirst:true,activeClass:'opened'}; if(options) {jQuery.extend(settings, options);} $(this).each(function() { var cObj=this; $(this).find(":header").not(this).next("*:not(:header)").hide(); if(settings.showFirst) { $(this).find(":header:first").addClass(settings.activeClass).not(this).next("*:not(:header)").show(); } $(this).find(":header").click(function(e) { $(this).toggleClass(settings.activeClass).next("*:not(:header)").toggle(':animated'); $(this).parents().filter(cObj).find(":header").not(this).next("*:not(:header)").hide().prev(":header").removeClass(settings.activeClass); }); }); }
How to call ?
$(function() { $(".faq1, .faq2, .faq3").faqs({showFirst:true,activeClass:'active'}); });
