Animating Accordions on Landing Page with Javascript

[knorris]

I'm trying to create an FAQ landing page in an accordion style that opens up when you click on it. I found this article (https://designers.hubspot.com/blog/creating-accordions) which was very helpful, but I'm having trouble getting it to actually animate with the Javascript. I'm not very practiced in Javascript so any feedback would be helpful!

I'm not sure if it's the placement of the custom module where the article says to put the Javascript "should be placed as the very last module in the template (even below the footer)" or if it's a matter of the code itself:

<script>
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}

$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');

if($(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();

// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
}

e.preventDefault();
});
});
</script>

[Derek_Gervais]

Hi @knorris,

It's tough to say what's going on without taking a closer look at the actual page. Could you post a link to the page in question?