Enhancing FAQs with jQuery
Posted on | March 8, 2007 | 4 Comments
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.
Technorati Tags: jquery, demo, faq
Comments
4 Responses to “Enhancing FAQs with jQuery”
Leave a Reply
April 19th, 2007 @ 6:07 am
Sounds great! Any chance of putting the demo back up? I notice I think all your jquery demos are 404.
Thanks : )
April 19th, 2007 @ 8:10 am
Thanks, the link went away in the most recent WP update, it is live again.
?March 24th, 2008 @ 2:26 pm
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.
June 14th, 2008 @ 11:40 am
Is it possible to expand a question depending on a variable in the url ? how could i do that ?