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

Лучшие проекты 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: ;
  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 (), чтобы вернуть коллекцию элементов, которые соответствуют имени класса, переданному этому методу, и сохранить эти элементы в переменных ответах.

Читайте также:  Как исправить отказ в разрешении SSH с открытым ключом

Мы использовали метод 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>
Оцените статью
bestprogrammer.ru
Добавить комментарий