HomeTutorialsEnhancing FAQs with jQuery

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.


I started out going to college for Business administration but soon found out that Coding would be a great way to have a sustainable career! I made coder's eye as my personal journey on learning how to code and sharing my Findings along the way. My vision with CE now is to be a way to help beginners that want to learn code but don't know where to start.


Sorry, the comment form is closed at this time.