Enhancing FAQs with jQuery

I’m so pleased by how useful and concise jQuery has been for my development of a dynamic FAQ module for Drupal. I can’t share that module yet, but I can talk about the jQuery that gives it a snappy and useful facelift.

It isn’t original, of course. Just click-to-toggle questions on a faq page. What is original is how easily styled this solution is, and how concise the javascript used to get there. Add to that a reasonable markup scheme, not burdened with superfluous divs or ids, and I’m a happy developer.

The markup

<div class="faq">
	<div class="question">Question here</div>
	<div class="answer">Answer here</div>
</div>

The javascript

SSS_faq = {
	init : function() {
		$('div.faq .answer').not(':first').slideToggle('fast');
		$('div.faq .question').click(function() {
                    SSS_faq.toggle(this)
                });
	},

	toggle : function(elt) {
		$(elt).toggleClass('active');
		$(elt).siblings('.answer').slideToggle('fast');
	}
}

$(function() {
	SSS_faq.init();
});

That’s it! I’ve also prepared a working demo.

[tags]jquery,demo,faq[/tags]

Related posts:

1. Simple, degradable Flash embedding using jQuery Now that I am doing professional web layouts for clients,...
2. Semitransparent rollovers made easy with JQuery I'm continuing to enjoy working with jQuery....
3. jQuery Selector Magic I've been working on a Drupal module to automatically make...
4. Using Dojo for a simple show/hide toggle effect. Without a doubt, my favorite Javascript library is Dojo Toolkit....