[Support request] FAQ Styling with GP

Home Forums Support [Support request] FAQ Styling with GP

Home Forums Support FAQ Styling with GP

  • This topic has 10 replies, 2 voices, and was last updated 10 months ago by nsahin.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1052625
    Edin

    How would you style a FAQ (questions and answers) section with GP alone (no plugins)?

    Is there a built-in functionality with GP where I click on questions and the answers expand, etc?

    Thanks,
    Edin

    #1052726
    David
    Staff
    Customer Support

    Hi there,

    this nothing built into the Theme to do this, but you can create a simple FAQ with HTML, Javascript and CSS.

    This is the HTML for each FAQ element:

    <div class="faq-container">
        <h2 class="faq-heading">This is the clickable Question heading</h2>
        <div class="faq-contents">
            <p>This contains the question answer</p>
        </div>
    </div>

    This JS to add a click event that toggles the visible class on the faq-contents container that comes immediately after the clicked heading.

    <script type="text/javascript">
    Array.from(document.querySelectorAll('.faq-heading'), function (elem) {
        elem.addEventListener('click', function showContent(e) {
            e.currentTarget.parentNode.querySelector('.faq-contents')
                           .classList.toggle('visible');
        });
    });
    </script>

    Then this CSS to style when clicked:

    .faq-heading {
        cursor: pointer;
    }
    .faq-contents {
        display: none;
    }
    .faq-contents.visible {
        display: block;
    }
    #1053004
    Edin

    Awesome David, thank you.

    Stupid question, can I add the JS directly into the page itself, or do I need to add it via Elements?

    Thanks,
    Edin

    #1053052
    David
    Staff
    Customer Support

    You can add it to the page, immediately after the HTML.
    Or add it to a Hook Element in the WP_footer hook and set the display rule for the pages it is on.

    #1054997
    Ronnie

    Thanks for your HTML/CSS/JS code above, David! It worked great for me, but I would also like to add a plus and minus icon for when the toggle is opened and closed.

    Could you please elaborate on how you would do that in the code above?

    #1055046
    David
    Staff
    Customer Support

    Hi there,

    so this HTML – this can be added to a HTML Block in the editor, or if you’re using the classic editor switch to text mode and paste in the code:

    <div class="faq-container">
        <h2 class="faq-heading">This is the clickable Question heading<span class="toggle"></span></h2>
        <div class="faq-contents">
            <p>This contains the question answer</p>
        </div>
    </div>

    This JS and need to be added to the wp_footer hook using a Hook Element :

    <script type="text/javascript">
    Array.from(document.querySelectorAll('.faq-heading'), function (elem) {
        elem.addEventListener('click', function showContent(e) {
            e.currentTarget.parentNode.querySelector('.faq-contents')
                           .classList.toggle('visible');
    e.currentTarget.classList.toggle('show');
        });
    });
    </script>

    and this CSS:

    .faq-heading {
        cursor: pointer;
    }
    
    .faq-contents {
        display: none;
    }
    
    .faq-contents.visible {
        display: block;
    }
    
    .toggle:before {
        content: '+';
        /* Add styles here for the toggle */
    }
    
    .faq-heading.show .toggle:before {
        content: '-';
        /* Switch toggle on open */
    }

    It will provide a simple + / – on toggle which you can change or style how you want.

    #1641740
    nsahin

    Hello David,

    Thanks for great code here.
    I wonder any chance to create links to these questions?

    So I can share the link with others and they can reach to right question directly.

    #1641912
    David
    Staff
    Customer Support

    Hi there,

    you can simply copy the URL of this topic, or if you want to link to one of the replies, copy the #number link that is above each reply.

    #1641936
    nsahin

    ๐Ÿ™‚
    I meant questions in FAQ.
    But anyway I have found this article.
    It adds bpth content and rich snippet in the same time.
    https://rankmath.com/blog/faq-schema/

    #1642796
    David
    Staff
    Customer Support

    Oops lol ๐Ÿ™‚

    You would need to include an ID on the Heading and within its markup and anchor link eg.

    <h2 class="faq-heading" id="the_unique_heading_ID">
        <a class="faq-link" href="the_full_url/#the_unique_heading_ID">Copy URL Icon here<a/>
        This is the clickable Question heading
        <span class="toggle"></span>
    </h2>
    #1643370
    nsahin

    Hello David,

    Thanks a lot. I did make some researched and learn that google has rich snippet for FAQs.
    It is goog tool for google.

    I have used Rank Math’s blocks, which creates content and also json file for google.

    https://rankmath.com/kb/faq-schema-block/

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.