FAQ module won't open

SOLVE
Regular 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
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
11 Replies 11
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
Regular Contributor

Hey Stefan,

 

Thank you very much for your input! 

This worked well!

 

Kind regards,

Candice

Reply
0 Upvotes
New Contributor

I have the same issue.

Where do i paste that code and how?

thanks in advance!

Reply
0 Upvotes
Advisor

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

<script>
... script goes here ...
</script>
--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Reply
0 Upvotes
New Contributor

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

 

 

Reply
0 Upvotes
Advisor

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

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

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

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

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 Smiley Sad

 

 

Reply
0 Upvotes
Advisor

Screen Shot 2019-09-10 at 10.36.53 AM.pngYou 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..

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

 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

Reply
0 Upvotes