Как добавить на сайт раздел FAQ с раскрывающимися ответами

Создание раздела FAQ (Frequently Asked Questions) с раскрывающимися ответами является отличным способом предоставления информации посетителям вашего сайта. В этой статье мы рассмотрим, как создать такой раздел с использованием HTML, CSS и JavaScript.

Структура HTML

Для начала создадим структуру нашего раздела FAQ с помощью HTML. В этом примере мы будем использовать теги <details> и <summary>, которые предоставляют нативную поддержку раскрывающихся элементов в HTML5.

<section class="faq">
  <details>
    <summary>Вопрос 1: Какая-то информация?</summary>
    <p>Ответ на вопрос 1: Это информация о чем-то важном.</p>
  </details>
  <details>
    <summary>Вопрос 2: Какая-то другая информация?</summary>
    <p>Ответ на вопрос 2: Это информация о чем-то другом важном.</p>
  </details>
  <!-- добавьте больше вопросов и ответов по аналогии -->
</section>

Стилизация с помощью CSS

Теперь добавим стили к нашему разделу FAQ с помощью CSS, чтобы сделать его более привлекательным визуально. В следующем примере мы зададим стили для элементов <details> и <summary>:

.faq {
  width: 80%;
  margin: 0 auto;
}

details {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5em;
  margin-bottom: 1em;
}

summary {
  font-weight: bold;
  cursor: pointer;
}

details[open] {
  background-color: #eef;
}

😉 Обратите внимание, что вы можете настроить эти стили по своему усмотрению или в соответствии с дизайном вашего сайта.

Добавление интерактивности с помощью JavaScript

Наконец, добавим немного JavaScript для того, чтобы при открытии одного вопроса другие автоматически закрывались, создавая аккордеонный эффект:

document.querySelectorAll('.faq details').forEach((item) => {
  item.addEventListener('toggle', (event) => {
    if (event.target.open) {
      document.querySelectorAll('.faq details').forEach((otherItem) => {
        if (otherItem !== event.target) {
          otherItem.removeAttribute('open');
        }
      });
    }
  });
});

Теперь у вас есть функциональный раздел FAQ с раскрывающимися ответами! 🎉

Если вы хотите продолжить изучение веб-разработки и узнать больше о создании сайтов, рекомендую посетить .