FAQ Accordion List Template

Answer your users' frequently asked questions with this interactive and accessible FAQ accordion.

This template allows users to click on a question to reveal the answer, keeping your help section tidy and easy to navigate.

Screenshot of a list of questions that expand to show answers.

Get Source Code Preview

About this Template

This template is built upon a semantic definition list (dl), with each question as a dt (definition term) and each answer as a dd (definition description). Lightweight, dependency-free JavaScript powers the expand and collapse functionality, ensuring fast performance. ARIA attributes are used to communicate the state of each accordion item to screen readers, making it fully accessible.

Features

Semantic Structure: Uses a dl for a perfectly structured question and answer list.
Accessible & Interactive: Implements ARIA attributes like aria-expanded and aria-controls, which are updated dynamically by the JavaScript.
Pure JavaScript: The toggle functionality is self-contained and uses modern, efficient JavaScript with no external libraries like jQuery.
CSS Animated Icon: The plus/minus icon is created with CSS and smoothly animates during the state change.
Self-Contained Code: All styles are scoped to the .faq-accordion-template class to prevent conflicts.

Code Breakdown

The FAQ is structured as a dl element. Each question is a button inside the dt for maximum accessibility, and the corresponding answer is inside the dd. By default, the answers are hidden with display: none.

The JavaScript finds all the question buttons. It adds a click event listener to each one. When a button is clicked, the script toggles an .active class on the question and toggles the visibility of the next element, which is the answer. It also updates the aria-expanded attribute on the button from false to true, which is essential for assistive technologies.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ Accordion List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f1f5f9;
            color: #1e293b;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           FAQ Accordion Component Styles - Copy from here
           ========================================================================== */
        .faq-accordion-template {
            --faq-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --faq-primary-text-color: #1e293b;
            --faq-secondary-text-color: #475569;
            --faq-accent-color: #4f46e5;
            --faq-border-color: #cbd5e1;
            --faq-bg-color: #ffffff;
            
            font-family: var(--faq-font-family);
            color: var(--faq-primary-text-color);
            width: 100%;
            max-width: 720px;
        }

.faq-accordion-template *,
        .faq-accordion-template *::before,
        .faq-accordion-template *::after {
            box-sizing: border-box;
        }

.faq-accordion-template .faq-header {
            text-align: center;
            margin-bottom: 2rem;
        }

.faq-accordion-template .faq-header h2 {
            font-size: 2.25rem;
            margin: 0 0 0.5rem 0;
        }

.faq-accordion-template .faq-list {
            background-color: var(--faq-bg-color);
            border-radius: .5rem;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
            border: 1px solid var(--faq-border-color);
        }

.faq-accordion-template dl {
            margin: 0;
        }

.faq-accordion-template .faq-item:not(:last-of-type) {
             border-bottom: 1px solid var(--faq-border-color);
        }

.faq-accordion-template .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            text-align: left;
            padding: 1.25rem;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 600;
        }

.faq-accordion-template .faq-question:hover {
            background-color: #f8fafc;
        }
        
        .faq-accordion-template .faq-question:focus-visible {
            outline: 2px solid var(--faq-accent-color);
            outline-offset: 2px;
            z-index: 2;
        }

.faq-accordion-template .icon {
            width: 1.25rem;
            height: 1.25rem;
            flex-shrink: 0;
            margin-left: 1rem;
            position: relative;
        }
        
        .faq-accordion-template .icon::before,
        .faq-accordion-template .icon::after {
            content: '';
            position: absolute;
            background-color: var(--faq-secondary-text-color);
            border-radius: 2px;
            transition: transform 0.3s ease;
        }
        
        .faq-accordion-template .icon::before {
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            transform: translateY(-50%);
        }
        
        .faq-accordion-template .icon::after {
            left: 50%;
            top: 0;
            height: 100%;
            width: 2px;
            transform: translateX(-50%);
        }

.faq-accordion-template .faq-item.active .icon::after {
            transform: translateX(-50%) rotate(90deg);
        }

.faq-accordion-template dd {
            margin: 0;
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.3s ease-out;
        }
        
        .faq-accordion-template .faq-item.active dd {
            grid-template-rows: 1fr;
        }
        
        .faq-accordion-template .faq-answer-content {
            overflow: hidden;
        }

.faq-accordion-template .faq-answer-content p {
            padding: 0 1.25rem 1.25rem 1.25rem;
            margin: 0;
            font-size: 1rem;
            color: var(--faq-secondary-text-color);
            line-height: 1.6;
        }

</style>
</head>
<body>

<div class="faq-accordion-template">
    <div class="faq-header">
        <h2>The Case Files</h2>
    </div>

<div class="faq-list">
        <dl>
            <div class="faq-item">
                <dt>
                    <button class="faq-question" aria-expanded="false" aria-controls="faq1_desc" id="faq1_label">
                        Do you take cases involving paranormal pigeons?
                        <span class="icon" aria-hidden="true"></span>
                    </button>
                </dt>
                <dd id="faq1_desc" role="region" aria-labelledby="faq1_label">
                    <div class="faq-answer-content">
                        <p>Naturally. We have a specialist in spectral avian affairs. Whether they're cooing from the beyond or just making a mess of your eaves, we're on the case. Our retainer is three stale bread crusts and a confidential informant's whisper.</p>
                    </div>
                </dd>
            </div>

<div class="faq-item">
                <dt>
                    <button class="faq-question" aria-expanded="false" aria-controls="faq2_desc" id="faq2_label">
                        My prized garden gnome has gone missing. What's the protocol?
                        <span class="icon" aria-hidden="true"></span>
                    </button>
                </dt>
                <dd id="faq2_desc" role="region" aria-labelledby="faq2_label">
                    <div class="faq-answer-content">
                        <p>First, don't touch anything. We'll dispatch our forensic gardening unit. They'll dust for tiny fingerprints, question the suspiciously smug-looking flamingo next door, and analyze local travel patterns. We get results.</p>
                    </div>
                </dd>
            </div>
            
            <div class="faq-item">
                <dt>
                    <button class="faq-question" aria-expanded="false" aria-controls="faq3_desc" id="faq3_label">
                        How do you guarantee discretion?
                        <span class="icon" aria-hidden="true"></span>
                    </button>
                </dt>
                <dd id="faq3_desc" role="region" aria-labelledby="faq3_label">
                    <div class="faq-answer-content">
                        <p>Our office is located behind a failing haberdashery. We communicate only through cryptic newspaper ads and messages delivered by squirrels with impeccable credentials. Our motto is, "What case? Never heard of 'em."</p>
                    </div>
                </dd>
            </div>
        </dl>
    </div>

question.setAttribute('aria-expanded', !isExpanded);
                        faqItem.classList.toggle('active');
                    });
                });
            }
        });
    </script>
</div>

</body>
</html>

View Output