May 21, 2012

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]

Share and Enjoy:
  • services sprite Enhancing FAQs with jQuery
  • services sprite Enhancing FAQs with jQuery
  • services sprite Enhancing FAQs with jQuery
  • services sprite Enhancing FAQs with jQuery
  • services sprite Enhancing FAQs with jQuery
  • services sprite Enhancing FAQs with jQuery
  • services sprite Enhancing FAQs with jQuery
  • services sprite Enhancing FAQs with jQuery

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....

About Bruce Kroeze

Comments

  1. Dave Foy says:

    Sounds great! Any chance of putting the demo back up? I notice I think all your jquery demos are 404.

    Thanks : )

  2. Bruce says:

    Thanks, the link went away in the most recent WP update, it is live again.

  3. John S says:

    I love the script, but I notice a flicker when the page loads. It’s as if the whole page loads with all the answers opened, and then it closes. This all takes places very quickly though so it appears as a flicker.

  4. Giannis says:

    Is it possible to expand a question depending on a variable in the url ? how could i do that ?

Speak Your Mind

*