Adding javascript to toggle answers to FAQs

Category: 

  • 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:

https://coolestguidesontheplanet.com/creating-expandable-faq-page-using-jquery/

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

Flushed all caches and viewed the page:
https://santucci.mit.edu/another-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?

12/5/16

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

12/5/16

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);
$(this).closest('.faq').removeClass('open');
} else {
var newHeight = $(this).closest('.faq').find('.faq_answer').height() + 'px';
console.log(newHeight);
$(this).closest('.faq').find('.faq_answer_container').animate({'height': newHeight}, 500);
$(this).closest('.faq').addClass('open');
}

});
// end of original code
}
};
})(jQuery);

3/29/17