Главная страница » Блок вопросов и ответов, FAQ на сайте

Блок вопросов и ответов, FAQ на сайте

Опубликовал(а): Александр

Обновлено: 06.12.2023

В этой статье мы рассмотрим процесс создания блока вопросов и ответов. Я использую самый популярный вариант. В этом исполнении если пользователь кликает на вопрос, система раскрывает соответствующий ответ, при этом сворачивая остальные. В коде я использую блоки div для решения задачи, применим небольшую анимацию с использованием CSS и добавим некоторое оформление. После этого, реализуем работы этого раздела мы осуществим с использованием всего нескольких строк кода на jQuery.

HTML код блока вопрос ответ
- HTML код блока FAQ с микроразметкой от schema.org
CSS для блока вопросов и ответов
jQuery для обработки клика по вопросу
Демонстрация работы блока FAQ

HTML код блока вопрос ответ

Я создал DOM-структуру используя упрощённый вариант. Для этого определил основной блок с классом block-faq, внутри которого будут блоки, содержащие вопрос и ответ с классом faq-row. Обычно заголовок вопроса оформляется как h2. Но, если ответ короткий, рекомендуется заменить его на div. Для удобства, ответ разместим в дочернем блоке faq-answer. Здесь можно добавить текст, списки, картинки. Именно этот блок мы будем открывать по клику на вопрос

<div class="block-faq">
    <div class="faq-row show">
        <h2 class="faq-title">Вопрос <span>&#9660;</span></h2>
        <div class="faq-answer">
            <p>Ответ</p>
        </div>
    </div>
    <div class="faq-row">
        <h2 class="faq-title">Вопрос <span>&#9660;</span></h2>
        <div class="faq-answer">
            <p>Ответ</p>
        </div>
    </div>
    <div class="faq-row">
        <h2 class="faq-title">Вопрос <span>&#9660;</span></h2>
        <div class="faq-answer">
            <p>Ответ</p>
        </div>
    </div>
</div>

HTML код блока FAQ с микроразметкой от schema.org

Следующий код лишь немного отличается от предыдущего. Здесь только добавлены атрибуты микроразметки для блока вопросов и ответов от schema.org, стили и скрипт от этого не меняются. Как видно ниже для параграфов используется атрибут itemprop=»text», для картинок нужно прописывать itemprop=»image», для ссылок itemprop=»url».

<div class="block-faq" itemscope itemtype="https://schema.org/FAQPage">
    <div class="faq-row show" itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
        <h2 class="faq-title" itemprop="name">Вопрос <span>&#9660;</span></h2>
        <div class="faq-answer" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
            <p itemprop="text">Ответ</p>
        </div>
    </div>
    <div class="faq-row" itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
        <h2 class="faq-title" itemprop="name">Вопрос <span>&#9660;</span></h2>
        <div class="faq-answer" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
            <p itemprop="text">Ответ</p>
        </div>
    </div>
    <div class="faq-row" itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
        <h2 class="faq-title" itemprop="name">Вопрос <span>&#9660;</span></h2>
        <div class="faq-answer" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
            <p itemprop="text">Ответ</p>
        </div>
    </div>
</div>

CSS для блока вопросов и ответов

Стили написаны элементарные, класс show указывает на активный блок. Скорее всего вам нужно будет их подрихтовать.

*{
    box-sizing: border-box;
}
.block-faq{
    max-width: 800px;
}
.faq-row{
    border:1px solid #707070;
    border-bottom: 0;
}
.faq-title{
    font-size:20px;
    padding:10px 15px;
    display:flex;
    width: 100%;
    margin:0;
    cursor: pointer;
}
.faq-title span{
    display:block;
    margin-left:auto;
    font-size: 11px;
    height:11px;
    color:#333;
    transition: .3s;
    margin-top:8px;
}
.show .faq-title span{
    transform: scale(1,-1);
    margin-top: 9px;
}
.faq-answer{
    display:none;
    font-size:16px;
    color:#333;
    width:100%;
    padding:10px 15px;
}
.faq-row:last-child{
    border-bottom: 1px solid #707070;
}
.faq-answer p{
    margin:0 0 15px;
}
.faq-answer > *:last-child{
    margin-bottom: 0;
}
.show .faq-answer{
    display:block;
}

jQuery для обработки клика по вопросу

Как и было написано в начале со скриптом мудрить особо не будем. Вот пара строк для обработки клика по блоку с вопросом.

jQuery:

$('.faq-title').click(function(){
    $('.faq-title').not(this).closest('.faq-row').removeClass('show');
    $(this).closest('.faq-row').addClass('show');
});

Если у вас не подключена библиотека jquery, можете использовать следующий код на javascript:

document.querySelectorAll('.faq-title').forEach(function(titleFaqElement) {
    titleFaqElement.addEventListener('click', function() {
        document.querySelectorAll('.faq-row').forEach(function(wrapFaqElement) {
            wrapFaqElement.classList.toggle('show', wrapFaqElement.contains(titleFaqElement));
        });
    });
});

Демонстрация работы блока FAQ

Следующий блок демонстрирует работу описанного выше кода с простой html разметкой:

Вопрос ▼

Ответ

Вопрос ▼

Ответ

Вопрос ▼

Ответ

Ниже еще один блок вопросов и ответов, код приводить не буду, просто изменил немного абы было. Используйте различные цвета или типы шрифтов для выделения важных разделов. Кроме того, добавьте иллюстрации, графику или диаграммы для визуального пояснения ответов. Иконки и картинки также помогут сделать страницу более привлекательной.