Értesítések és panelek

Interaktív FAQ

Élő előnézet – a komponens teljes méretben.

Élő előnézet

HTML · CSS · JS

<section class="we-faq" aria-labelledby="we-faq-title">
    <div class="we-faq__intro">
        <span class="we-faq__eyebrow">SEGÍTÜNK ELIGAZODNI</span>
        <h2 id="we-faq-title">Gyakori kérdések</h2>
        <p>A legfontosabb tudnivalók egy helyen.</p>
    </div>

    <div class="we-faq__list">
        <article class="we-faq__item">
            <h3 class="we-faq__heading">
                <button class="we-faq__question"
                        type="button"
                        aria-expanded="false">
                    <span>Hogyan működik a szolgáltatás?</span>
                    <span class="we-faq__icon" aria-hidden="true">+</span>
                </button>
            </h3>
            <div class="we-faq__answer" hidden>
                <p>A szolgáltatás használata egyszerű és átlátható.
                Válaszd ki a számodra megfelelő lehetőséget, majd
                kövesd a megjelenő útmutatást.</p>
            </div>
        </article>

        <article class="we-faq__item">
            <h3 class="we-faq__heading">
                <button class="we-faq__question"
                        type="button"
                        aria-expanded="false">
                    <span>Később módosíthatom a beállításokat?</span>
                    <span class="we-faq__icon" aria-hidden="true">+</span>
                </button>
            </h3>
            <div class="we-faq__answer" hidden>
                <p>Igen, a módosítható beállításokat később is
                megváltoztathatod, így a megoldást az igényeidhez
                igazíthatod.</p>
            </div>
        </article>

        <article class="we-faq__item">
            <h3 class="we-faq__heading">
                <button class="we-faq__question"
                        type="button"
                        aria-expanded="false">
                    <span>Mobiltelefonon is használható?</span>
                    <span class="we-faq__icon" aria-hidden="true">+</span>
                </button>
            </h3>
            <div class="we-faq__answer" hidden>
                <p>Igen. A kialakítás alkalmazkodik a kisebb
                képernyőkhöz is, így mobilon és táblagépen
                egyaránt kényelmesen használható.</p>
            </div>
        </article>

        <article class="we-faq__item">
            <h3 class="we-faq__heading">
                <button class="we-faq__question"
                        type="button"
                        aria-expanded="false">
                    <span>Hol kérhetek további segítséget?</span>
                    <span class="we-faq__icon" aria-hidden="true">+</span>
                </button>
            </h3>
            <div class="we-faq__answer" hidden>
                <p>További kérdés esetén keresd fel az oldal
                kapcsolatfelvételi felületét, és írd meg,
                miben van szükséged segítségre.</p>
            </div>
        </article>
    </div>
</section>

.we-faq {
    --faq-accent: #55d6a0;
    --faq-text: #edf5f1;
    --faq-muted: #a1b0a9;
    --faq-border: rgba(163, 194, 177, 0.16);

    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 24px;
    color: var(--faq-text);
    background: #111a18;
    border: 1px solid var(--faq-border);
    border-radius: 20px;
    font-family: Inter, Arial, sans-serif;
    box-sizing: border-box;
}

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

.we-faq__intro {
    margin-bottom: 30px;
}

.we-faq__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--faq-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.we-faq__intro h2 {
    margin: 0 0 12px;
    color: var(--faq-text);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.2;
}

.we-faq__intro p {
    margin: 0;
    color: var(--faq-muted);
    font-size: 15px;
    line-height: 1.7;
}

.we-faq__list {
    border-top: 1px solid var(--faq-border);
}

.we-faq__item {
    border-bottom: 1px solid var(--faq-border);
}

.we-faq__heading {
    margin: 0;
    font-size: inherit;
}

.we-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 22px 2px;
    border: 0;
    background: transparent;
    color: var(--faq-text);
    text-align: left;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
}

.we-faq__question:hover {
    color: var(--faq-accent);
}

.we-faq__question:focus-visible {
    outline: 2px solid var(--faq-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.we-faq__icon {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--faq-border);
    border-radius: 9px;
    color: var(--faq-accent);
    font-size: 21px;
    font-weight: 400;
    transition: background 0.25s ease,
                transform 0.25s ease;
}

.we-faq__question[aria-expanded="true"] .we-faq__icon {
    background: rgba(85, 214, 160, 0.1);
    transform: rotate(45deg);
}

.we-faq__answer {
    padding: 0 42px 22px 2px;
    color: var(--faq-muted);
    font-size: 14px;
    line-height: 1.85;
    animation: we-faq-reveal 0.25s ease;
}

.we-faq__answer[hidden] {
    display: none;
}

.we-faq__answer p {
    margin: 0;
}

@keyframes we-faq-reveal {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 520px) {
    .we-faq {
        padding: 32px 18px;
        border-radius: 14px;
    }

    .we-faq__question {
        padding: 18px 0;
        font-size: 14px;
    }

    .we-faq__answer {
        padding-right: 8px;
        padding-bottom: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .we-faq__icon {
        transition: none;
    }

    .we-faq__answer {
        animation: none;
    }
}

(function () {
    "use strict";

    function initFaqs() {
        const faqSections = document.querySelectorAll(".we-faq");

        faqSections.forEach(function (faq) {
            if (faq.dataset.faqInitialized === "true") {
                return;
            }

            faq.dataset.faqInitialized = "true";

            const questions = faq.querySelectorAll(
                ".we-faq__question"
            );

            questions.forEach(function (question) {
                question.addEventListener("click", function () {
                    const item = question.closest(".we-faq__item");

                    if (!item) {
                        return;
                    }

                    const answer = item.querySelector(
                        ".we-faq__answer"
                    );

                    const isExpanded =
                        question.getAttribute("aria-expanded") === "true";

                    question.setAttribute(
                        "aria-expanded",
                        String(!isExpanded)
                    );

                    if (answer) {
                        answer.hidden = isExpanded;
                    }
                });
            });
        });
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", initFaqs);
    } else {
        initFaqs();
    }
})();