FAQ module won't open

SOLVE
Occasional Contributor

On many webapges we make use of the FAQ modules.

Previously they expanded no problem, suddenly it has broken across every page that makes use of this module and I am not sure how to fix it.

 

I do not have much knowledge of JavaScript so would need some assistance please in regards to fixing it and where to add it!

 

This is the current code I have for the FAQ module:

 

<div class="accordion">
<div class="accordion_group {% if widget.expanded %}expanded{% endif %}">
<div class="accordion_header"><span class="accordion_icon"><i class="far fa-plus-square"></i></span> {{ widget.faq_question }}</div>
<div class="accordion_content">
{{ widget.faq_answer }}
</div>
</div>
</div>

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Advisor

@CandiceLloyd you're probably missing the javascript. Add this and it should start working:

$('.accordion_header').on('click', function() {
  $(this).parent().toggleClass('expanded');
});

If it still doesn't work, check the console for any other JS errors.

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Reply
0 Upvotes
2 Replies
Highlighted
Advisor

@CandiceLloyd you're probably missing the javascript. Add this and it should start working:

$('.accordion_header').on('click', function() {
  $(this).parent().toggleClass('expanded');
});

If it still doesn't work, check the console for any other JS errors.

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Reply
0 Upvotes
Occasional Contributor

Hey Stefan,

 

Thank you very much for your input! 

This worked well!

 

Kind regards,

Candice

Reply
0 Upvotes