[Support request] FAQ Styling with GP

Home Forums Support FAQ Styling with GP

Viewing 6 posts - 1 through 6 (of 6 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:

    <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:

    <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.

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