I used CSS to modify the look of FAQ Schema

This doesn’t work anymore, because there is no “input” which can be styled.
Please add an accordeon option.

Hey Alberto,

thanks a lot for the code you’ve shared. For me, it has only worked after I have made some changes though.

This is the code which has to be inside functions.php in order to work:

function faq_accordion_hook_javascript_footer() {
    ?>
        <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>
    <?php
}
add_action('wp_footer', 'faq_accordion_hook_javascript_footer');

I had to remove the inner function (faqClickSetup) and add a bracket in order for it to work.

I’ve also added animations & more stuff. You can find it at the bottom of my website here.
If you like it, I can share it here or in a knowledgebase article so others can find it

• This reply was modified 4 years, 4 months ago by Alessio.
• This reply was modified 4 years, 4 months ago by Alessio.
• This reply was modified 4 years, 4 months ago by Alessio.