Как создать раздел FAQ на любом сайте с помощью JavaScript?

В этой статье мы создали аккордеон с часто задаваемыми вопросами (FAQ), используя JavaScript. Аккордеон используется для отображения содержимого в формате списка. Он может разворачиваться или сворачиваться для отображения содержимого, которое в нем содержится.

Подход:

Создайте вложенный тег divHTML с именами классов, содержащих вопросы и ответы.
Для стилизации добавьте некоторые свойства CSS,такие как выравнивание, размер шрифта, отступы, поля и т.д.
Используя JavaScript, реализуйте функции, которые отображают ответ или элемент аккордеона при нажатии на вопрос.

HTML-код: мы использовали классы для вопросов и ответов. Эти классы используются для стилизации.

index.html

<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" href="styles.css">

  <script src="main.js"></script>

</head>

<body>

  <h2 style="color:green; text-align:center">

    GeeksforGeeks

  </h2>

  <div class="layout">

    <div class="accordion">

      <div class="accordion__question">

        <p>Where is Taj Mahal located?</p>

      </div>

      <div class="accordion__answer">

        <p>Taj Mahal is located in Agra, Uttar Pradesh.</p>

      </div>

    </div>

    <div class="accordion">

      <div class="accordion__question">

        <p>How many planets are there in solar system?</p>

      </div>

      <div class="accordion__answer">

        <p>

          There are eight planets in solar system.

          Mercury, Venus, Earth, Mars, Jupiter, Saturn,

          Uranus, and Neptune.

        </p>

      </div>

    </div>

  </div>

</body>

</html>

Код CSS: для стилизации мы использовали свойства CSS.

style.css

body {

  background-color: rgb(153, 218, 196);

}

.layout {

  width: 600px;

  margin: auto;

}

.accordion {

  padding: 10px;

  margin-top: 10px;

  margin-bottom: 10px;

  background: rgb(105, 206, 105);

  border-radius: 10px;

}

.accordion__question p {

  margin: 5px;

  padding: 0;

  font-family: Verdana;

  font-size: 20px;

}

.accordion__answer p {

  margin: 5px;

  padding: 10px;

  font-size: large;

  font-family: Verdana, Geneva, Tahoma, sans-serif;

  color: rgb(255, 255, 255);

  background: rgb(82, 170, 122);

  border-radius: 10px;

}

.accordion:hover {

  cursor: pointer;

}

.accordion__answer {

  display: none;

}

.accordion.active .accordion__answer {

  display: block;

}

Примечание. Мы также можем создать другой файл для стилизации или добавить их в тот же HTML-файл под тегом стиля.

Код JavaScript: мы будем использовать JavaScript для отображения аккордеона при щелчке по нему. Мы использовали метод querySelectorAll (), чтобы вернуть коллекцию элементов, которые соответствуют имени класса, переданному этому методу, и сохранить эти элементы в переменных ответах.

Мы использовали метод forEach () для вызова функции для каждого элемента в переменной ответа. Теперь укажите прослушиватель событий addEventListener () при щелчке по элементу. Он проверит, есть ли у события активный класс, используя свойство classList, которое возвращает имена всех классов, связанных с этим элементом или событием.

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

main.js

let answers = document.querySelectorAll(".accordion");

answers.forEach((event) => {

  event.addEventListener("click", () => {

    if (event.classList.contains("active")) {

      event.classList.remove("active");

    } else {

      event.classList.add("active");

    }

  });

});

Полный код: в этом разделе мы объединим все коды вместе, чтобы создать FAQ

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <title>FAQ</title>

    <style>

        body{

            background-color: rgb(153, 218, 196);

        }

        .layout{

            width: 600px;

            margin: auto;

        }

        .accordion{

            padding: 10px;

            margin-top: 10px;

            margin-bottom: 10px;

            background: rgb(105, 206, 105);

            border-radius: 10px;

        }

        .accordion__question p{

            margin: 5px;

            padding: 0;

            font-family: Verdana;

            font-size: 20px;

        }

        .accordion__answer p{

            margin: 5px;

            padding: 10px;

            font-size: large;

            font-family: Verdana, Geneva, Tahoma, sans-serif;

            color: rgb(255, 255, 255);

            background: rgb(82, 170, 122);

            border-radius: 10px;

        }

        .accordion:hover{

            cursor: pointer;

        }

        .accordion__answer {

            display: none;

        }

        .accordion.active .accordion__answer {

            display: block;

        }

    </style>

</head>

<body>

    <h2 style="color:green; text-align:center">GeeksforGeeks</h2>

    <div class="layout">

        <div class="accordion">

            <div class="accordion__question">

                <p>Where is Taj Mahal located?</p>

            </div>

            <div class="accordion__answer">

                <p>Taj Mahal is located in Agra, Uttar Pradesh.</p>

            </div>

        </div>

        <div class="accordion">

            <div class="accordion__question">

                <p>How many planets are there in solar system?</p>

            </div>

            <div class="accordion__answer">

                <p>

                  There are eight planets in solar system.

                  Mercury, Venus, Earth, Mars, Jupiter, Saturn,

                  Uranus, and Neptune.

                </p>

            </div>

        </div>

    </div>

    <script>

        let answers=document.querySelectorAll(".accordion");

        answers.forEach((event)=>{

            event.addEventListener('click',()=>{

                if(event.classList.contains("active")){

                    event.classList.remove("active");

                }

                else{

                    event.classList.add("active");

                }

            })

        })

    </script>

</body>

</html>