FAQ module won't open

Developer Support CMS Development
1

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>

2

@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.

3

Hey Stefan,

Thank you very much for your input!

This worked well!

Kind regards,

Candice

4

I have the same issue.

Where do i paste that code and how?

thanks in advance!

5

@Ibis you could add it directly below the HTML inside of a script tag.:

<script>
... script goes here ...
</script>
6

Hi stefen,

thanks for your fast response. Do you mean like this?

<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>
<script> $(‘.accordion_header’).on(‘click’, function() {
$(this).parent().toggleClass(‘expanded’);
}); </script>

Because it did not work. I really do not know a lot about it unfortunately.

best

Giorgio

7

@Ibis if that didn’t work you might have other javascript errors on the page causing this script not to run because what you posted should work. Do you have a preview link to share?

8

https://info.ibis.nl/iso-webpagina?hs_preview=hqRLzXaL-12519305069

Hi Stefen,

do you mean that one?

best,

Giorgio

9

@Ibis yes, that first one. It looks like you mixed up the javascript with the HTML. Are you not using the FAQ module?

10

hi stefen, apologies for the late respone. I had a flight to catch for vacation!

I did use the FAQ module but it shows as a flat template :disappointed_face:

11

Screen Shot 2019-09-10 at 10.36.53 AM.png
Screen Shot 2019-09-10 at 10.36.53 AM.png1756×502 154 KB

You should remove the HTML from the script tag. This HTML should be in the body where you want the tabs to appear on the page..

12

Hey Giorgio

I am attaching a screenshot of my code where I have gone in to the pages’ template.

On the right side panel to the Additional <head> markup.

You will see the code I used starting beneath: <script type=“text/javascript”>

Screenshot 2019-08-29 at 16.27.39.jpg
Screenshot 2019-08-29 at 16.27.39.jpg1440×900 285 KB

13

Hi everyone!

If you’re still struggling with this issue, as we have in the past, we made a simple, feature-rich HubSpot Module for FAQ’s that should work great for any HubSpot CMS page or website if you get fed up with the code.

Check it out here if you’re interested: https://marketplace.hubspot.com/products/begin-bound/beginbound-ultimate-faq-module-live

Happy HubSpotting!