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?
santucci@mit.edu
(Sorry, that should have read "I took the javascript (minus the script tags)...")
12/5/16
asphodel@mit.edu
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
santucci@mit.edu
Thanks, that did the trick!
3/31/17