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>

The javascript

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

	toggle : function(elt) {

$(function() {

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