I've created a module that will allow my client to create FAQs and organize them by topic.
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.
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>
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>
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.