[Support request] FAQ Styling with GP

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;
}

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.

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.

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.

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>