FAQ – Can i use Page?

Hello,

Since I have seen a lot of users asking things like that, I thought about going an extra step and I have done a complete code:

Add this CSS code in your style.css file in your current theme (or in your Customization screen, in the Custom CSS section) (you might want to customize this CSS to change how the FAQ block looks):

#rank-math-faq .rank-math-list-item{
	position:relative;
}
#rank-math-faq .rank-math-list-item input{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 41px;
    opacity: 0;
    cursor: pointer;
    z-index:999;
}
#rank-math-faq .rank-math-list-item h3 {
    background: #f1f2f6;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    position:relative;
    margin-bottom: 0;
}
#rank-math-faq .rank-math-list-item h3:before {
	display:inline-block;
	content: "";
    width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 12px;
	border-color: transparent transparent transparent #000000;
	margin-right: 8px;
}
#rank-math-faq .rank-math-list-item input:checked+h3:before {
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
}
#rank-math-faq .rank-math-answer{
	padding: 10px;
	max-height: 0;
	overflow:hidden;
}
#rank-math-faq .rank-math-list-item input:checked+h3~.rank-math-answer {
	max-height: 100vh;
	overflow:visible;
}
div.rank-math-list-item:hover > div.rank-math-answer {
    max-height: 100vh;
    overflow: visible;
}

#rank-math-faq .rank-math-answer {
    padding:0;
}

Now add this code at the end of your functions.php file in your current theme (we will use it to make your accordion FAQ open and close when you click on each item):

function faq_accordion_hook_javascript_footer() {
    ?>
        <script>
        jQuery(document).ready(function() {
            function faqClickSetup() {
                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 hope this code helps you and any other user looking on how to implement that accordion FAQ in their Rank Math’s FAQ Blocks.

Looking forward to help you.

• This reply was modified 3 years, 10 months ago by Alberto. Reason: Edited a potential issue in the script

Hello,

We are super happy that this resolved your issue. If you have any other questions in the future, know that we are here to help you.

If you don’t mind me asking, could you please leave us a review (if you haven’t already) on https://wordpress.org/support/plugin/seo-by-rank-math/reviews/#new-post about your overall experience with Rank Math? We appreciate your time and patience.

If you do have another question in the future, please feel free to create a new forum topic, and it will be our pleasure to assist you again.

Thank you.