Как удачно организовать FAQ-раздел на сайте

Зачастую на сайте требуется организовать раздел «Часто задаваемые вопросы» (FAQ). Как правило таких вопросов может быть какое-то число (иногда немалое), и, в итоге, страница либо становится очень длинной (ведь нужно еще и вместить ответы), либо ссылается на другие страницы. Оба варианта не очень-то удобны для пользователя. В этом уроке я покажу Вам как сделать удобный FAQ-раздел!

дополнительные материалы к урокам демо версия урока

Суть организации FAQ-раздела, создание которого я Вам покажу, будет сводиться к тому, что пользователю не нужно будет переходить на другую страницу, щелкая по ссылке-вопросу. Все будет на одной странице: и вопросы и ответы. Однако, страница из-за этого не станет длинной и неудобной, так как ответы будут спрятаны до тех пор, пока пользователь не кликнет по интересующему его вопросу. В этот момент ему откроется блок с ответом на этот конкретный вопрос, а при повторном щелчке блок снова исчезнет.

Таким образом пользователь сможет видеть сразу все «Часто задаваемые вопросы», с легкостью и удобством выбирать нужный и при чтении ответа оставаться на той же самой странице. Он сможет открывать и закрывать ответы без перезагрузок, без ожидания загрузки контента на новой странице и прочих неудобных вещей. Таким образом Ваш FAQ-раздел будет гораздо эффективней и полезней.

И реализуем мы это при помощи библиотеки jQuery легко и просто. Давайте начнем!

Создаем удобный FAQ-раздел на сайте

1. Начнём мы как обычно с html-файла.

Я создам файл html и назову его «faq.html». Код в этом файле будет достаточно простой.

Между тегами «body» я создам тег «div» с классом «wrapper». Он в свою очередь будет содержать два других тега «div»: один с классом «header» (в нем просто будет располагаться логотип), а другой – с классом «content», в нем будет расположен еще один тег «div» с классом «main», в котором будут содержаться: заголовок; вопросы, также заключенные в теги заголовков; ответы, заключенные в теги «div» с классом «answer» и тег для футера.

Вот этот код:

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="faq_style.css"> <title>FAQ in one page</title> </head> <body> <div class="wrapper"> <div class="header"> <p class="logo">WebSite-Create.ru</p> </div> <div class="content"> <div class="main"> <h1>FAQ - Часто Задаваемые Вопросы</h1> <h2>Правда ли, что создавать сайты может каждый?</h2> <div class="answer"> <p>Конечно, правда! Единственное, что для этого нужно: большое желание, немного терпения и настойчивости!</p> </div> <h2>Может ли язык JavaScript сделать веб-страницы особенными?</h2> <div class="answer"> <p>Да, конечно, может! Из скучных статических страниц Ваши страницы превратятся в интерактивные и будут взаимодействовать с пользователем очень активно.</p> </div> <h2>Действительно ли так необходимо изучать JavaScript?</h2> <div class="answer"> <p>Если Вам хочется, чтобы Ваш веб-сайт отличался удобством, интерактивностью и пользователи с удовольствием проводили на нем время, то JavaScript будет как нельзя кстати!</p> </div> <div class="footer"> <p>WebSite-Create.ru 2014.</p> </div> </div> </body> </html>

В коде я прописала 3 вопроса и 3 ответа. Думаю, для демонстрации этого будет достаточно, но на практике вопросов и ответов, конечно же, может быть гораздо больше.

Также Вы можете увидеть, что в документе уже подключен файл таблицы стилей. Нам нужно его создать и сохранить в тот же каталог, что и html-файл.

Итак, создайте css-файл и дайте ему имя «faq_style.css».

Пока что наш css-файл пуст, поэтому если мы посмотрим html-страницу в браузере, то увидим следующее.

верстка FAQ-раздела на сайт

2. Сейчас мы сделаем так, чтобы наша страница имела более симпатичный вид и пропишем некоторые стили в css-файл.

Я создам основные стили, которые зададут фоновый цвет, выровняют страницу по центру, а также зададут стили для заголовков и абзацев.

Вот код, который я пропишу в файл таблицы стилей.

html,body{background-color:#5C874E;} body{width:720px; margin:0 auto;} .logo{font-family:Verdana, Geneva, sans-serif; font-size:24px; color:#669; text-shadow:0px 0px 7px #FFFFFF;} h1,h2,.answer p,.footer p{font-family:Verdana, Geneva, sans-serif;} h1{font-size:24px; color:#FFC; border-bottom:1px dashed #FFFFCC; padding:10px; text-align:center;} h2{font-size:20px; color:#fff; cursor:pointer;} .footer{position:fixed; bottom:0px;} .footer p{color:#036; font-size:18px;}

После этих преобразований наша страница будет иметь вот такой вид:

придание стилей странице с FAQ-разделом

3. Основные приготовления закончены и пришло время заняться делом. Сейчас наши вопросы и ответы расположены друг под другом и если их будет больше, то страница может растянуться на много метров. Но скоро мы это исправим.

Для начала нужно подключить к html-файлу библиотеку jQuery. Файл библиотеки Вы можете найти в «Исходниках» к уроку или скачать с сайта jquery.com .

Вернитесь в html-файл и после подключения файла таблицы стилей подключите файл библиотеки jQuery.

<script src="jquery-1.6.3.min.js"></script>

4. Теперь создадим файл JavaScript, в котором будем писать наш код. Кода будет немного, однако, я предпочитаю создавать для кода JavaScript отдельный файл.

Итак, создаем файл. Я назову его «faq.js», помещу его в ту же папку, что и html-файл и подключу его к html-файлу сразу после подключения файла библиотеки jQuery.

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

Теперь можно открыть файл «faq.js» и приступить к написанию кода.

5. Код будет достаточно несложным.

В первой строчке мы скажем, что код нужно выполнять, когда html-документ загрузится и будет готов.

Во второй строчке кода мы скрываем все элементы, содержащие ответы на часто задаваемые вопросы (эти элементы имеют класс «answer»).

В третьей строке мы применяем ко всем нашим заголовкам вопросов функцию «toggle», которая работает как переключатель: если мы щелкаем один раз по заголовку – выполняется одно действие, если щелкаем повторно – другое. Эти действия определяются функциями, которые являются принимаемыми параметрами для функции «toggle». Первая функция будет показывать ответы, раскрывая их в течении одной секунды; вторая скрывать ответы также в течении одной секунды.

Вот и весь код.

$(document).ready(function() { $('.answer').hide(); $('.main h2').toggle(function(){ $(this).next('.answer').fadeIn(1000); }, function(){ $(this).next('.answer').fadeOut(1000); }); });

Теперь можно обновить страницу в браузере и увидеть, как это все работает. Вы увидите, что все ответы скрыты и можно видеть список всех часто задаваемых вопросов. Вам стоит только щелкнуть мышью по заголовку нужного вопроса и ниже появится ответ на него. Щелкните второй раз, и ответ снова исчезнет.

Все это без перехода на другие страницы, без перезагрузок и прочих неудобств. Найти нужный вопрос гораздо проще, потому что ответы скрыты и Вами не нужно долго скролить страницу вниз в поисках нужного вопроса.

раздел FAQ для сайта на одной странице

Посмотреть пример работы этого примера Вы можете щелкнув по иконке «Демо» в начале урока.

Вот в общем то и все. На этом буду заканчивать данный урок. Надеюсь он был Вам полезен. Этот прием можно применять не только для раздела FAQ на сайте, но и для других задач. Я думаю, Вы найдете ему применение и под другие свои цели.

Жду Ваших комментариев! Делитесь уроком с друзьями при помощи кнопок социальных сетей ниже.

И также подписывайтесь на обновления блога.

Удачи Вам, Успехов и Отличного Настроения.

Оставайтесь на связи!

Как сделать Якорь для Гиперссылки

Как подключить любые шрифты для сайта

Как создать релевантный контент для сайта

Понравилась статья? Поделись с друзьями!


Не нашли того, что искали? Воспользуйтесь расширенным поиском!

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail:


Комментарии к этой статье:

Комментарий добавил(а): Александр
Дата: 2014-02-18

Кодировка в примере не верная.

Комментарий добавил(а): Админ
Дата: 2014-02-18

Спасибо. Поправила

Комментарий добавил(а): Ирина
Дата: 2014-02-19

Спасибо, очень нужная тема... но вопрос - как сделать , чтобы ссылка на эту страницу отображалась в меню сайта? ведь это отдельная html -страница, я верно поняла? значит ее нужно загружать папкой на хостинг. а в меню она не будет видна..

Комментарий добавил(а): Админ
Дата: 2014-02-19

После того, как загрузите файлы на хостинг, создаете в вашем меню навигации новый пункт, например с именем, FAQ. Пункт меню по сути является ссылкой, поэтому в ее атрибуте href прописываете адрес до этого самого html-файла. Например, если html-файл лежит в папке faq и называется faq.html, то ссылка меню навигации будет выглядеть примерно так: <a href="/faq/faq.html">FAQ-раздел</a>

Комментарий добавил(а): Ирина
Дата: 2014-02-22

Попробую... плохо, что у вас в комментах нельзя указать свой е-майл , как на других сайтах - чтобы получать ответы на свои комменты... я написала вопрос и потеряла, где писала... вот сегодня откопала:)

Комментарий добавил(а): Админ
Дата: 2014-02-22

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

Комментарий добавил(а): vasilich
Дата: 2014-08-09

Спасибо.

Комментарий добавил(а): Сергей
Дата: 2015-08-29

Спасибо!!! Очень круто. Просто замечательно. Все отлично встало.

Комментарий добавил(а): Андрей
Дата: 2016-03-17

Норм)

Добавить Комментарий:


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail: