I used CSS to modify the look of FAQ Schema

  • Hi!

    So, for better user experience, I wanted to use CSS to modify the look of the FAQ Schema to be accordions. Is this okay? Will this affect the functionality of the Rank Math FAQ Schema?

    Also, I tried looking this topic up yesterday but couldn’t find anyone who had the same question, so incase anyone is looking for CSS in the future to turn your Rank Math FAQ Schema into accordions using CSS, here’s the code:

    
    #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;
    }
Viewing 7 replies - 1 through 7 (of 7 total)
  • Hello,

    First of all, thanks for sharing it, I am sure it will help a lot of users in the future.

    To answer this: “Is this okay? Will this affect the functionality of the Rank Math FAQ Schema?“: Yes, it is ok, it won’t affect the functionality of the Rank Math FAQ Schema, so you can use it safely.

    Looking forward to help you.

    Okay, great to hear, thanks so much Alberto!

    Hello Joshua,

    I am glad this helped you. 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.

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

    Hello Alessio,
    I shared a working code recently in a thread where a user was trying to make work this code, you can check it here: https://support.rankmath.com/ticket/faq-can-i-use-page/

    Looking forward to help you.

    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 1 week, 3 days ago by Alessio.
    • This reply was modified 1 week, 3 days ago by Alessio.
    • This reply was modified 1 week, 3 days ago by Alessio.

    Hello,

    Thanks a lot the update.

    I am closing this ticket but 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.

Viewing 7 replies - 1 through 7 (of 7 total)

The ticket ‘I used CSS to modify the look of FAQ Schema’ is closed to new replies.