Adding javascript to toggle answers to FAQs


  • Question

I am trying to put some FAQs on a page where the answer is revealed when the user clicks on the question. I took the javascript (minus the tags) and CSS from this page:

Added them to Configuration --> Development --> JS injector and CS injector, respectively.

Flushed all caches and viewed the page:

Clicked on the question "Does this work?"

Instead of the answer ("Yes!"), nothing happened. Is this an error in the javascript or something else?


(Sorry, that should have read "I took the javascript (minus the script tags)...")


The code works, but you'll need to use Drupal's style for attaching jQuery, i.e., attaching it to Drupal.behaviors:

(function ($) {
// attach FAQ behaviors
Drupal.behaviors.faq = {
attach: function () {
// original code follows
$('.faq_question').click(function () {

if ($(this).parent().is('.open')) {
$(this).closest('.faq').find('.faq_answer_container').animate({'height': '0'}, 500);
} else {
var newHeight = $(this).closest('.faq').find('.faq_answer').height() + 'px';
$(this).closest('.faq').find('.faq_answer_container').animate({'height': newHeight}, 500);

// end of original code


Thanks, that did the trick!