Filter FAQs by Topic

SOLVE
FSantos
Member

I've created a module that will allow my client to create FAQs and organize them by topic.

Screen Shot 2021-05-28 at 9.01.29 PM.png

The way it's supposed to behave is when you select a topic button, it will then filter and show only FAQs related to that topic. Currently, I've got it to work on a jsFiddle here, but it's not working on the live site here. This is strange given they both have the same code.

Any insight as to what I can do to get it to work would be appreciated.

0 Upvotes
1 Accepted solution

Accepted Solutions
dennisedson
Solution
Community Manager

@FSantos 

Can you try putting the function within the html panel?  Curious to see if that works

<script>
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("faqfullgroup");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}
</script>
Thanks,

Dennis



Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content

View solution in original post

0 Upvotes
6 Replies 6
DanielSanchez
Key Advisor

HI @FSantos ,

 

You can create a schedule of guides and each guide in your FAQ theme.

I built some FAQ modules using this code as a reference: https://www.w3schools.com/howto/howto_js_tabs.asp

 

In this page i use tabs 3 times: https://ead.univali.br/

In this page i use tabs too: https://ead.univali.br/bolsas-de-estudos-ead

 

I hope this code can help you.

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!

FSantos
Member

I tried out this code purely without bringing in my custom fields and it did not work. I do think this may be a jQuery version issue because I'm getting the same console error with this other method you recomendded.

0 Upvotes
webdew
Top Contributor | Diamond Partner

Hi @FSantos ,

You need to include latest jquery file in hubspot backend after that code will run.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 


FSantos
Member

I updated the version of jquery (see below), but that did not resolve the problem.

Screen Shot 2021-06-11 at 12.34.31 PM.png

0 Upvotes
dennisedson
Solution
Community Manager

@FSantos 

Can you try putting the function within the html panel?  Curious to see if that works

<script>
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("faqfullgroup");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}
</script>
Thanks,

Dennis



Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content

View solution in original post

0 Upvotes
FSantos
Member

That worked! Thank you.