[Resolved] Functions php or Elements

[Christos]

Hi. I have a piece of code to add to change Rankmath FAQ into accordion faqs display.
There is a CSS part and a js part. https://rankmath.com/kb/turn-faq-block-into-accordion/
About the functions.php part. Is there a different way to add that using elements or not? I want to avoid the Child theme.

[Christos]

For example, check https://www.channeldoubler.com/staging/el/
It works when added as hook element for Entire website but some script is showing at the top. why?

[David]

Hi there,

change the Hook to wp_footer
And replace the hooks content with just the <script> ie:

<script>
    jQuery(document).ready(function() {
        var faqBlock = jQuery("div#rank-math-faq");
        var faqItems = faqBlock.find("div.rank-math-list-item");
        faqItems.bind("click", function(event) {
            var answer = jQuery(this).find("div.rank-math-answer");
            if (answer.css("overflow") == "hidden") {
                answer.css("overflow", "visible");
                answer.css("max-height", "100vh");
            } else {
                answer.css("overflow", "hidden");
                answer.css("max-height", "0");
            }
        });
    });
</script>

[Christos]

ΟΚ seems to work. thanks.

[David]

You’re welcome

[Christos]

Hi. The code is not working in responsive. Any ideas?
https://www.channeldoubler.com/staging/

[David]

Its not working on my desktop either.
Edit the Element and set the Priority to a really high value eg. 1000 this will ensure the scripts loads after jQuery is loaded.

[Christos]

OK. seems to be solved.

[David]

Glad to hear that!

[Author]

Posts