FAQ module won't open

CandiceLloyd · ‎Mar 4, 2019

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>

stefen · ‎Mar 4, 2019

@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, Community Champion, Kelp Web Developer

View solution in original post

jessebeginbound · ‎Jun 1, 2020

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!

stefen · ‎Mar 4, 2019

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

Ibis · ‎Aug 29, 2019

I have the same issue.

Where do i paste that code and how?

thanks in advance!

stefen · ‎Aug 29, 2019

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

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

Ibis · ‎Aug 29, 2019

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

CandiceLloyd · ‎Aug 29, 2019

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

stefen · ‎Aug 29, 2019

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

Ibis · ‎Aug 29, 2019

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

https://app.hubspot.com/content/2804826/edit/12519305069/content

Hi Stefen,

do you mean that one?

best,

Giorgio

stefen · ‎Aug 29, 2019

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

Ibis · ‎Sep 9, 2019

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 😞

stefen · ‎Sep 10, 2019

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

CandiceLloyd · ‎Mar 5, 2019

Hey Stefan,

Thank you very much for your input!

This worked well!

Kind regards,

Candice

CMS Development