FAQs

FAQs

Canvas builds FAQ sections from the toggle shortcode wrapped in a .faqs container. Each question is a .toggle panel that expands on click, and an optional filter bar lets visitors narrow the list by category. This is the same markup used across the bundled FAQ demos.

Structure

• .faqs: the wrapper for the whole FAQ group (given an id so the filter can target it).
• .toggle: one question panel. Add .faq plus one or more .faq-<category> classes so it can be filtered.
• .toggle-header: the clickable row.
• .toggle-icon with .toggle-closed and .toggle-open icons.
• .toggle-title: the question text.
• .toggle-content: the answer, revealed when the panel opens.

<div id="faqs" class="faqs">

    <div class="toggle faq faq-marketplace faq-authors">
        <div class="toggle-header">
            <div class="toggle-icon">
                <i class="toggle-closed bi-question-circle"></i>
                <i class="toggle-open bi-question-circle"></i>
            </div>
            <div class="toggle-title">
                How do I become an author?
            </div>
        </div>
        <div class="toggle-content">Becoming an author is simple and free. Create your account, then submit your first item through the Upload form along with a preview, thumbnail and a clear description.</div>
    </div>

    <div class="toggle faq faq-legal faq-itemdiscussion">
        <div class="toggle-header">
            <div class="toggle-icon">
                <i class="toggle-closed fa-solid fa-lock"></i>
                <i class="toggle-open fa-solid fa-lock"></i>
            </div>
            <div class="toggle-title">
                Who owns the rights to my work?
            </div>
        </div>
        <div class="toggle-content">You keep the copyright to everything you create. Buyers receive a license to use the item under the marketplace terms.</div>
    </div>

</div>

Accordion behavior

By default each toggle opens and closes on its own. To make the group behave like an accordion, where opening one question closes the others, use the accordion markup instead (.accordion with .accordion-header and .accordion-content). See the Accordions article for that pattern.

Category filter

Add a .grid-filter list above the .faqs container. Each link carries a data-filter value that matches a .faq-<category> class on the panels. The all value shows every question. Tag each .toggle with one or more category classes so it appears under the matching filters.

<ul class="grid-filter style-4 customjs">
    <li class="activeFilter"><a href="#" data-filter="all">All</a></li>
    <li><a href="#" data-filter=".faq-marketplace">Marketplace</a></li>
    <li><a href="#" data-filter=".faq-authors">Authors</a></li>
    <li><a href="#" data-filter=".faq-legal">Legal</a></li>
    <li><a href="#" data-filter=".faq-itemdiscussion">Item Discussion</a></li>
    <li><a href="#" data-filter=".faq-miscellaneous">Miscellaneous</a></li>
</ul>

A panel tagged with several categories (for example faq faq-authors faq-legal) shows up under each of those filters.

Icons

Swap the icon fonts freely. The bundled FAQ demos mix Bootstrap Icons (bi-question-circle), Unicons (uil uil-comments-alt) and Font Awesome (fa-solid fa-lock). Keep the paired .toggle-closed and .toggle-open icons so the state swap works.

Tips

• Keep the id on .faqs unique per page if you run more than one FAQ block, and point each filter list at the correct container.
• Use short, question-style titles and keep answers focused so the expanded panels stay readable.
• For long lists, the category filter makes a big difference to how quickly visitors find an answer.