You can check out the code here on my Github page
In this tutorial, I’m going to show you how to create a simple FAQ page in HTML, CSS, and JavaScript.
Before we start building our FAQ page, we will look out what an FAQ page is and why it is important.
Узнайте, как добавить на сайт блок с часто задаваемыми вопросами (FAQ) для улучшения пользовательского опыта и снижения нагрузки на поддержку.
Блок с часто задаваемыми вопросами (FAQ) является важным элементом на сайте, поскольку он помогает пользователям найти ответы на их вопросы, не обращаясь в службу поддержки. В этой статье мы рассмотрим, как добавить на сайт блок с FAQ.
Узнайте, как легко создать привлекательный и функциональный раздел FAQ с раскрывающимися ответами с помощью HTML, CSS и JavaScript!
Создание раздела FAQ (Frequently Asked Questions) с раскрывающимися ответами является отличным способом предоставления информации посетителям вашего сайта. В этой статье мы рассмотрим, как создать такой раздел с использованием HTML, CSS и JavaScript.
На всех успешных или популярных сайтах есть страница FAQ (Frequently Asked Questions).
Переводя на русский, FAQ — это «Часто Задаваемые Вопросы». Такая страница помогает ответить на часто задаваемые вопросы от пользователей.
В этой записи я хочу поделиться вариантом того, как такую страницу можно сделать с использованием HTML, CSS (SASS — необязательно
) и jQuery.
Ниже я покажу и немного опишу код, который использовался для создания FAQ страницы из демо выше.
min read
In this tutorial, we will learn to create a FAQ page using HTML, CSS and a bit of JQuery.
https://youtube.com/watch?v=3Xkzeme1OEA%3Ffeature%3Doembed
Source Code :
FAQ body{ background: #eee; padding-top: 20px; font-family: monospace; } .header{ border-radius: 20px 20px 0px 0px; padding: 10px 0px; background: purple; color: #fff; width: 100%; display: flex; align-content: center; justify-content: center; } .faq-item{ margin-bottom: 40px; margin-top: 40px; } .faq-body{ display: none; margin-top: 30px; } .faq-wrapper{ width: 75%; margin: 0 auto; } .faq-inner{ padding: 30px; background: aliceblue; } .faq-plus{ float: right; font-size: 1.4em; line-height: 1em; cursor: pointer; } hr{ background-color: #9b9b9b; }$(".faq-plus").on('click',function(){ $(this).parent().parent().find('.faq-body').slideToggle(); });Содержание
- FAQs
- What is an FAQ page ? +
- What is an FAQ page ? +
- What is an FAQ page ? +
- Что такое страница часто задаваемых вопросов? +
- Что такое страница часто задаваемых вопросов? +
- HTML-код для аккордеона
- CSS-код для аккордеона
- Код JavaScript для аккордеона
- Окончательный результат
- HTML-код для раздела часто задаваемых вопросов
- Часто задаваемые вопросы
- CSS-код для раздела часто задаваемых вопросов
- Код JavaScript для раздела часто задаваемых вопросов
- Окончательный вывод раздела часто задаваемых вопросов с использованием HTML, CSS и JavaScript
- УСС (СКСС)
- JQuery
- Используйте разметку для улучшения читаемости
- Создайте раздел FAQ на вашем сайте
- Добавьте ссылки на другие ресурсы или страницы
- Определите, какие вопросы нужно включить в FAQ
- Структура HTML
- Why do you need an FAQ page?
- Prerequisites
- Структурируйте и ответы
- Добавление интерактивности с помощью JavaScript
- HTML
- Часто задаваемые вопросы по NICE от Александр Тешабаев
- Вопрос
- Вопрос длиннее
- Вопрос
- Вопрос которы может быть последним
- Стилизация с помощью CSS
- What is an FAQ Page?
FAQs
What is an FAQ page ? +
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
What is an FAQ page ? +
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
What is an FAQ page ? +
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum был стандартным текстом-пустышкой в отрасли с 1500-х годов, когда неизвестный типограф взял гранку шрифтов и переделал ее, чтобы сделать книгу образцов шрифтов.Что такое страница часто задаваемых вопросов? +
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным текстом-пустышкой в отрасли с 1500-х годов, когда неизвестный типограф взял гранку шрифтов и переделал ее, чтобы сделать книгу образцов шрифтов.Что такое страница часто задаваемых вопросов? +
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным текстом-пустышкой в отрасли с 1500-х годов, когда неизвестный типограф взял гранку шрифтов и переделал ее, чтобы сделать книгу образцов шрифтов.
Всем привет. Добро пожаловать на сегодняшний урок по Codewithrandom
. Мы научимся создавать FAQ-аккордеон, который используется в Google, когда мы набираем какой-либо вопрос, и сразу под ответом есть много вопросов, связанных с ним. На сегодняшнем занятии мы будем использовать HTML, CSS и JavaScrip .
t, чтобы завершить этот проект «Аккордеон» с часто задаваемыми вопросами.
В этом сообщении блога мы обсудим Часто задаваемые вопросы Раздел «Аккордеон» с использованием HTML, CSS и JavaScript
с полным исходным кодом, поэтому вы можете просто скопировать и вставить их в свой проект. Приятного изучения и обучения !!
Надеюсь, у вас есть представление о проекте.
HTML-код для аккордеона
Во-первых, мы начнем с создания структуры проекта FAQ Accordion. Как вы можете видеть в приведенном выше коде, мы использовали все необходимые элементы и атрибуты для настройки структуры. Дайте нам знать код части CSS, чтобы добавить стиль и выровнять теги.
Хотите выучить HTML для React? 🔥
Если да, то вот наш мастер-код HTML для React 📚 В этой электронной книге вы получите полные рукописные заметки по HTML, CSS, JavaScript и React 💪. Он включает в себя 450 проектов с исходным кодом. и более 250 самых задаваемых вопросов на собеседовании
Получите электронную книгу прямо сейчас! 👇
Часто задаваемые вопросы: Аккордеон Как называется компания?Название компании: Codewithrandom.
Как найти его в Интернете?Поиск в Google Codewithrandom
Есть ли у него канал на YouTube?Да
Дизайн пользовательского интерфейса шаблона чат-бота с использованием HTML, CSS и JavaScript
CSS-код для аккордеона
Во-вторых, идет код CSS, который мы стилизовали для структуры, которую мы дополнили, а также выровняли проект FAQ Accordion так, чтобы он правильно располагался и не загромождался подходящими элементами CSS. Теперь давайте напишем часть JavaScript, чтобы сделать ее отзывчивой.
*,
*:до,
*:после{
заполнение: 0;
маржа: 0;
размер коробки: граница-коробка;
}
тело{
цвет фона: RGB (16 120 108);
}
.контейнер{
ширина: 45%;
минимальная ширина: 500 пикселей;
позиция: абсолютная;
трансформировать: транслировать(-50%,-50%);
верх: 50%;
осталось: 50%;
}
.wrapper{
цвет фона: #ffffff;
поле внизу: 20 пикселей;
отступ: 15 пикселей 40 пикселей;
радиус границы: 5 пикселей;
box-shadow: 0 15px 25px rgba(0,0,50,0.2);
}
.переключать,
.содержание{
семейство шрифтов: «Poppins», без засечек;
}
.переключать{
ширина: 100%;
цвет фона: прозрачный;
дисплей: гибкий;
выровнять-элементы: по центру;
оправдание-содержание: пространство между;
размер шрифта: 16 пикселей;
цвет: #111130;
вес шрифта: 500;
граница: нет;
контур: нет;
курсор: указатель;
отступ: 15 пикселей 0;
}
.содержание{
положение: относительное;
размер шрифта: 14 пикселей;
выравнивание текста: по ширине;
высота строки: 30 пикселей;
высота: 0;
переполнение: скрыто;
переход: все 1с;
}
Код JavaScript для аккордеона
let toggles = document.getElementsByClassName('toggle');
let contentDiv = document.getElementsByClassName('content');
пусть иконки = document.getElementsByClassName('icon');
for(let i=0; i{
if( parseInt(contentDiv[i].style.height) != contentDiv[i].scrollHeight){
contentDiv[i].style.height = contentDiv[i].scrollHeight + "px";
toggles[i].style.color = "#0084e9";
иконки[i].classList.remove('fa-plus');
иконки[i].classList.add('fa-минус');
}
еще{
contentDiv[i].style.height = "0px";
toggles[i].style.color = "#111130";
иконки[i].classList.remove('fa-минус');
иконки[i].classList.add('fa-plus');
}
for(let j=0; j<contentDiv.length; j++){
если(j!==i){
contentDiv[j].style.height = "0px";
toggles[j].style.color = "#111130";
icon[j].classList.remove('fa-минус');
icon[j].classList.add('fa-plus');
}
}
});
}
Окончательный результат
Мы успешно создали наш FAQ «Аккордеон», используя HTML, CSS и JavaScript.
Вы можете использовать этот проект для своих личных нужд, и соответствующие строки кода приведены по ссылке, упомянутой выше.
Спасибо и приятного обучения!!!
Code Idea – художник-кодировщик
Автор – Харш Савант
Теперь, как разработчик, нет ничего, что мы не могли бы воссоздать или закодировать, поэтому давайте посмотрим, как создается эта функция. В этой статье мы создаем раздел часто задаваемых вопросов, используя HTML, CSS и JavaScript. На этой ноте я приветствую вас всех в Codewithrandom с новым блогом, в котором мы увидим функцию часто задаваемых вопросов по созданию.
Надеюсь, у вас появилась идея для этого проекта.
HTML-код для раздела часто задаваемых вопросов
Часто задаваемые вопросы по HTML CSS Дизайн | Webdevtrick.com Часто задаваемые вопросы
Что может JavaScript?Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
Как JavaScript может изменять значения HTML и CSS?Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
Что такое SVG?Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
Имеет ли значение раздел часто задаваемых вопросов на веб-сайте?Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Стихия стрел жизни и зодиака. Чтобы следить за ценами на мультфильмы, власть имущие были отстранены.
Как создать легкий элемент часто задаваемых вопросов?Правда в том, что боль сама по себе важна, за ней будет следить клиент, но бывает и так, что работы и боли много. Стихия стрел жизни и зодиака. Чтобы следить за ценами на мультфильмы, власть имущие были отстранены.
В этом HTML-коде мы определили структуру, в которой под тегом элемента «аккордеон» мы определили некоторые вопросы и ответы на них, а затем связали код jQuery и тег сценария, потому что он будет использоваться, когда мы будет кодировать JavaScript, теперь позволяет кодировать часть CSS, чтобы добавить стиль к дизайну часто задаваемых вопросов.
Хотите выучить HTML для React? 🔥
Если да, то вот наш мастер-код HTML для React 📚 В этой электронной книге вы получите полные рукописные заметки по HTML, CSS, JavaScript и React 💪. Он включает в себя 450 проектов с исходным кодом. и более 250 самых задаваемых вопросов на собеседовании
Получите электронную книгу прямо сейчас! 👇
Более 100 проектов JavaScript с исходным кодом (от начинающих до продвинутых)
CSS-код для раздела часто задаваемых вопросов
@import url('https://fonts.googleapis.com/css?family=Hind:300,400');
*, *:до после {
-webkit-box-sizing: встроенный;
размер коробки: присущий;
}
html {
-webkit-box-sizing: граница-коробка;
размер коробки: граница-коробка;
}
тело {
маржа: 0;
заполнение: 0;
семейство шрифтов: «Hind», без засечек;
фон: #fff;
цвет: #4d5974;
дисплей: -webkit-box;
дисплей: -webkit-flex;
дисплей: -ms-flexbox;
дисплей: гибкий;
минимальная высота: 100vh;
}
.контейнер {
маржа: 0 авто;
отступ: 4рем;
ширина: 48рем;
}
ч3 {
размер шрифта: 1,75рем;
цвет: #373d51;
отступ: 1,3рем;
маржа: 0;
}
.аккордеон а {
позиция: относительно;
дисплей: -webkit-box;
дисплей: -webkit-flex;
дисплей: -ms-flexbox;
дисплей: гибкий;
-webkit-box-orient: вертикально;
-webkit-box-direction: нормальное;
-webkit-flex-direction: столбец;
-ms-flex-direction: столбец;
гибкое направление: столбец;
ширина: 100%;
отступы: 1рем 3рем 1рем 1рем;
цвет: #7288a2;
размер шрифта: 1,15рем;
вес шрифта: 400;
нижняя граница: сплошная 1 пиксель #e5e5e5;
}
.accordion a: наведите курсор,
.accordion a:hover::after {
курсор: указатель;
цвет: #ff5353;
}
.accordion a:hover::after {
граница: сплошная 1 пиксель #ff5353;
}
.accordion a.active {
цвет: #ff5353;
нижняя граница: сплошная 1 пиксель #ff5353;
}
.accordion a::after {
семейство шрифтов: 'Ionic';
содержимое: '\f218';
позиция: абсолютно;
плавать: вправо;
справа: 1 объект;
размер шрифта: 1rem;
цвет: #7288a2;
отступ: 5 пикселей;
ширина: 30 пикселей;
высота: 30 пикселей;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
граница-радиус: 50%;
граница: сплошная 1 пиксель #7288a2;
выравнивание текста: по центру;
}
.accordion a.active::after {
семейство шрифтов: 'Ionic';
содержимое: '\f209';
цвет: #ff5353;
граница: сплошная 1 пиксель #ff5353;
}
.аккордеон .content {
непрозрачность: 0;
отступ: 0 1рем;
максимальная высота: 0;
нижняя граница: сплошная 1 пиксель #e5e5e5;
переполнение: скрыто;
ясно: оба;
-webkit-transition: все 0,2 секунды замедляются на 0,15 секунды;
-o-переход: все 0,2 секунды облегчают 0,15 секунды;
переход: все 0,2 с облегчают 0,15 с;
}
.аккордеон .content р {
размер шрифта: 1rem;
вес шрифта: 300;
}
.accordion .content.active {
непрозрачность: 1;
отступ: 1 шт.;
максимальная высота: 100%;
-webkit-transition: все 0,35 с замедляются на 0,15 с;
-o-переход: все 0,35 с облегчают 0,15 с;
переход: все 0,35 с облегчают 0,15 с;
} Более 50 проектов HTML, CSS и Javascript с исходным кодом
Код JavaScript для раздела часто задаваемых вопросов
const items = document.querySelectorAll(".accordion a");
функция toggleAccordion(){
this.classList.toggle('активный');
this.nextElementSibling.classList.toggle('активный');
}
items.forEach(item => item.addEventListener('click', toggleAccordion));
Окончательный вывод раздела часто задаваемых вопросов с использованием HTML, CSS и JavaScript
Мы успешно создали наш раздел часто задаваемых вопросов с использованием HTML, CSS и JavaScript
. Вы можете использовать этот проект для своих личных нужд, и соответствующие строки кода приведены по ссылке, упомянутой выше.
Веб-сайт-портфолио с использованием исходного кода HTML, CSS и Javascript
Автор – Харш Савант
УСС (СКСС)
С помощью CSS необходимо придать рамке более-менее приятный вид. Я использую препроцессор SCSS, потому что для меня это быстрее и проще.
Если вы не понимаете как пользоваться препроцессором SCSS, то во вкладке CSS есть кнопка «View Compiled» как показано на скриншоте ниже:
Нажав на нее, вы сможете посмотреть уже скопилированный CSS, то есть его нормальный (традиционный) вид. Как например код ниже.
:after, :before, * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 11pt;
text-align: left;
font-family: Verdana, Tahoma, sans-serif;
}
.container {
width: 70%;
margin: 50px auto;
display: block;
}
.container .nice-header {
text-align: center;
font-size: 4.5em;
margin-bottom: 20px;
font-weight: bold;
color: #D8D8D8;
position: relative;
}
.container .nice-header .sub {
color: #676767;
position: absolute;
top: -20px;
right: 0;
font-family: Georgia, serif;
font-size: 13pt;
font-weight: normal;
font-style: italic;
text-decoration: none;
}
.container .nice-header .sub:hover {
text-decoration: underline;
color: #000;
}
.container .faq {
width: 100%;
position: relative;
}
.container .faq-questions {
list-style: none;
}
.container .faq-questions, .container .faq-questions > li {
width: 100%;
display: block;
padding: 10px;
}
.container .faq-questions > li:nth-child(odd) {
background-color: #E8E8E8;
}
.container .faq-questions > li:nth-child(even) {
background-color: #D8D8D8;
}
.container .faq-questions > li h4.faq-question, .container .faq-questions > li faq-question {
font-size: 12pt;
font-weight: bold;
color: #4E4E4E;
cursor: pointer;
}
.container .faq-questions > li p.faq-answer, .container .faq-questions > li .faq-asnwer {
font-size: 10pt;
line-height: 1.5;
margin-top: 7px;
display: none;
}
.container .faq-questions > li p.faq-answer:hover, .container .faq-questions > li .faq-asnwer:hover {
color: #000;
}
После этого нужно добавить немного магии с помощью jQuery.
JQuery
С помощью jQuery я смогу контролировать события связанные с FAQ страницей. Например, чтобы при нажатии на заголовок вопроса — открывался ответ на него. Или чтобы при нажатии на другой вопрос (при условии того, что какой-либо вопрос уже был открыт), предыдущий скрывался и открывался только текущий.
$(function() {
var $speed = 200;
var $class = 'opened';
var $class_open = '.faq-answer';
$(document).ready(function() {
$('.faq-question').on('click', function() {
$ul = $(this).closest('ul');
$answer = $(this).closest('li').find($class_open);
if( !$(this).closest('li').hasClass($class) ) {
$ul.find('li').each(function() {
if( $(this).hasClass($class) )
$(this).removeClass($class).find($class_open).slideUp($speed);
});
}
$answer
.slideToggle($speed)
.closest('li')
.toggleClass($class);
});
});
}); Из jQuery скрипта выше, видно три основных переменные — это $speed
, $class
и $class_open
.
$speed
отвечает за скорость скрытия или показа ответа на вопрос при нажатии на заголовок.
$class
— это имя класса, которое добавляется на <li>
элемент открытого вопроса. Например, если вы нажали на первый вопрос, то на <li>
элемент текущего вопроса будет добавлен класс, который вы напишите для этой переменной.
$class_open
— это имя класса, которое используется для ответа на каждый из вопросов. Если вы поменяли имя класса в HTML каркасе, то для этой переменной его тоже нужно поменять.
В целом логику работы данного скрипта я уже описал выше. Если у вас остались какие-либо вопросы — вы можете написать их ниже, к этой записи.
Используйте разметку для улучшения читаемости
Чтобы сделать ваш блок FAQ более читабельным и удобным для пользователей, используйте разметку, такую как заголовки, списки, жирный текст и т.д. Например, вы можете использовать заголовки второго уровня ( ##
) для каждой категории вопросов и заголовки третьего уровня ( ###
) для каждого вопроса.
## Оплата
### Какие способы оплаты доступны?
💳 Мы принимаем к оплате все основные кредитные карты, а также PayPal и Apple Pay.
Создайте раздел FAQ на вашем сайте
Создайте новую страницу на вашем сайте или добавьте секцию на существующую страницу, где будет размещаться блок FAQ. Вы можете назвать этот раздел «Часто задаваемые вопросы», «FAQ» или что-то в этом роде.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Получить
программу
Добавьте ссылки на другие ресурсы или страницы
Если на вашем сайте есть другие страницы или ресурсы, которые могут помочь пользователям получить дополнительную информацию, добавьте ссылки на них в соответствующие ответы на вопросы.
### Могу ли я вернуть товар, если мне не подходит размер?
Да, вы можете вернуть товар в течение 14 дней с момента получения. Посетите нашу страницу [Политика возврата](/returns-policy) для получения подробной информации о процессе возврата.
Следуя этим шагам, вы сможете создать эффективный и полезный блок FAQ для вашего сайта, который поможет пользователям быстро найти ответы на свои вопросы и уменьшит нагрузку на вашу службу поддержки.
Определите, какие вопросы нужно включить в FAQ
Сначала вам нужно определить, какие вопросы будут включены в ваш блок FAQ. Обычно это самые распространенные вопросы, которые задают пользователи. Вы можете собрать эти вопросы из заявок в службу поддержки или опираться на свой опыт.
Структура 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>
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Получить
программу
Why do you need an FAQ page?
- Reduces the time your employees need to answer simple questions.
- Allows visitors to find answers to all their questions in one place.
- It is a great source for content ideas.
Prerequisites
The segment below describes the steps to be taken for building this FAQ page.
Step One:
Structuring our HTML documents
HTML Code:
in this section, the elements of the FAQ page are created and loaded. Next, we create and link the style.css and index.js file. add font links and icon links. It also defines the structure of the FAQ page.
We wrapped our HTML elements in a section with a class name of FAQ-container. This section contains different elements which are split into parts. The first part contains the question while the second part contains the answers that belong to the same category section.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FAQ PAGE</title> <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <main> <h1 class="faq-heading">FAQ'S</h1> <section class="faq-container"> <div class="faq-one"> <!-- faq question --> <h1 class="faq-page">What is an FAQ Page?</h1> <!-- faq answer --> <div class="faq-body"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit saepe sequi, illum facere necessitatibus cum aliquam id illo omnis maxime, totam soluta voluptate amet ut sit ipsum aperiam. Perspiciatis, porro!</p> </div> </div> <hr class="hr-line"> <div class="faq-two"> <!-- faq question --> <h1 class="faq-page">Why do you need an FAQ page?</h1> <!-- faq answer --> <div class="faq-body"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit saepe sequi, illum facere necessitatibus cum aliquam id illo omnis maxime, totam soluta voluptate amet ut sit ipsum aperiam. Perspiciatis, porro!</p> </div> </div> <hr class="hr-line"> <div class="faq-three"> <!-- faq question --> <h1 class="faq-page">Does it improves the user experience of a website?</h1> <!-- faq answer --> <div class="faq-body"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit saepe sequi, illum facere necessitatibus cum aliquam id illo omnis maxime, totam soluta voluptate amet ut sit ipsum aperiam. Perspiciatis, porro!</p> </div> </div> </section> </main> <script src="main.js"></script> </body> </html>
Step Two: Positioning our layouts and styling
CSS Code:
This section contains the positioning of our FAQ page, the font size, and the styling of the elements.
- Create layout columns,
- For our content to be readable, we must use a good font. Check out this link for the font used in the project google font.
- Центральная страница в середине окна
тело{
семейство шрифтов: «Work Sans», без засечек;
}
.faq-заголовок{
нижняя граница: #777;
отступы: 20 пикселей 60 пикселей;
}
.faq-контейнер{
дисплей: гибкий;
оправдание-содержание: центр;
гибкое направление: столбец;
}
.hr-line{
ширина: 60%;
маржа: авто;
}
/* Оформление кнопок, которые используются для открытия и закрытия тела страницы часто задаваемых вопросов */
.faq-страница {
/* цвет фона: #eee; */
цвет: #444;
курсор: указатель;
отступ: 30 пикселей 20 пикселей;
ширина: 60%;
граница: нет;
контур: нет;
переход: 0,4 с;
маржа: авто;
}
.faq-body{
маржа: авто;
/* выравнивание текста: по центру; */
ширина: 50%;
отступ: авто;
}
/* Добавляем цвет фона к кнопке, если на нее нажимают (добавьте класс .active с помощью JS), и когда вы наводите на нее указатель мыши (наводите курсор) */
.активный,
.faq-page:hover {
цвет фона: #F9F9F9;
}
/* Оформление панели страницы часто задаваемых вопросов. Примечание: по умолчанию скрыто */
.faq-body {
отступ: 0 18 пикселей;
цвет фона: белый;
дисплей: нет;
переполнение: скрыто;
}
.faq-страница:после {
содержимое: '\02795';
/* Символ Юникода для знака «плюс» (+) */
размер шрифта: 13 пикселей;
цвет: #777;
плавать: вправо;
поле слева: 5 пикселей;
}
.активный:после {
содержимое: "\2796";
/* Символ Юникода для знака «минус» (-) */
}
Шаг третий: Добавление функциональности
Код JavaScript
: Этот раздел содержит часть кода, которая управляет функциями страницы часто задаваемых вопросов: обработку событий.
Теперь мы собираемся добавить JavaScript, чтобы сделать нашу страницу часто задаваемых вопросов функциональной. В настоящее время наша страница выглядит красиво, но работает не очень хорошо, потому что мы не включили JavaScript, но мы можем сделать ее намного лучше.
файл main.js
var faq = document.getElementsByClassName("faq-page");
вар я;
for (i = 0; i <faq.length; i++) {
faq[i].addEventListener("click", function () {
/* Переключение между добавлением и удалением «активного» класса,
чтобы выделить кнопку, управляющую панелью */
this.classList.toggle("активный");
/* Переключение между скрытием и отображением активной панели */
вар тело = this.nextElementSibling;
if (body.style.display === "блок") {
body.style.display = «нет»;
} еще {
body.style.display = "блок";
}
});
}
Структурируйте и ответы
Для удобства чтения и ориентации структурируйте свой блок FAQ, разделяя вопросы и ответы по категориям или темам. Например, вы можете разделить вопросы на такие категории, как «Оплата», «Доставка», «Возврат товара» и т.д.
Добавление интерактивности с помощью JavaScript
Наконец, добавим немного JavaScript для того, чтобы при открытии одного вопроса другие автоматически закрывались, создав аккордеонный эффект:
document.querySelectorAll('.faq Details').forEach((item) => {
item.addEventListener('toggle', (event) => {
если (event.target.open) {
document.querySelectorAll('.faq Details').forEach((otherItem) => {
if (otherItem !== event.target) {
другойItem.removeAttribute('открыть');
}
});
}
});
});
Теперь у вас есть функциональный раздел FAQ с раскрытием ответов! 🎉
Веб-разработчик: новая работа через 9 месяцев
Получатся, даже если у вас нет опыта в IT
Получить
программа
HTML
Ниже представлен каркас для часто задаваемых вопросов, который я в перспективе использовал для jQuery, чтобы открыть/закрыть вопрос.
из классов очень важны для корректировки некоторых его работ, поэтому сначала полностью одобряйте мой вариант, а дальше уже исправляйте, как вам захочется.
Часто задаваемые вопросы по NICE от Александр Тешабаев
Вопрос
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
Вопрос длиннее
Вопрос
Ответ
Вопрос которы может быть последним
Ответ
Основная часть этого каркаса — это маркированный список ( <ul>
), внутри которого пишутся <li>
.
Каждый <li>
элемент — это новый вопрос в FAQ. Так же, каждый <li>
должен включать в себя <h4 class="faq-question"></h4>
— это вопрос и <p class="faq-answer"></p>
— это ответ на вопрос из <h4>
.
Далее нужно сделать примерный дизайн для FAQ.
Стилизация с помощью 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;
}
😉 Обратите внимание, что вы можете настроить эти стили по своему усмотрению или в соответствии с дизайном вашего сайта.
What is an FAQ Page?
FAQ is one of the most overlooked pages, but you can hardly find a popular online store or a website without it.
