На всех успешных или популярных сайтах есть страница FAQ (Frequently Asked Questions).

Переводя на русский, FAQ — это «Часто Задаваемые Вопросы». Такая страница помогает ответить на часто задаваемые вопросы от пользователей.

В этой записи я хочу поделиться вариантом того, как такую страницу можно сделать с использованием HTML, CSS (SASS — необязательно) и jQuery.

FAQ демо

Ниже я покажу и немного опишу код, который использовался для создания FAQ страницы из демо выше.

HTML

Ниже представлен каркас для FAQ, который я в дальнейшем использовал для jQuery, чтобы открыть/закрыть вопрос.

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

<div class="container">
  <h1 class="nice-header">NICE FAQ <a href="http://bologer.ru/prostaya-faq-stranica-s-jquery-html-i-css/" class="sub">by Alexander Teshabaev</a></h1>
  <div class="faq">
    <ul class="faq-questions">
      <li>
        <h4 class="faq-question">Вопрос</h4>
        <p class="faq-answer">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</p>
      </li>
      <li>
        <h4 class="faq-question">Вопрос длиннее </h4>
        <p class="faq-answer"><img src="http://www.lipsum.com/images/banners/black_234x60.gif"></p>
      </li>
      <li>
        <h4 class="faq-question">Вопрос</h4>
        <p class="faq-answer">Ответ</p>
      </li>
      <li>
        <h4 class="faq-question">Вопрос которы может быть последним</h4>
        <p class="faq-answer">Ответ</p>
      </li>
    </ul>
  </div>
</div>

Основная часть этого каркаса — это маркированный список (<ul>), внутри которого пишутся <li>.

Каждый <li> элемент — это новый вопрос в FAQ. Так же, каждый <li> должен включать в себя <h4 class="faq-question"></h4>  — это вопрос и <p class="faq-answer"></p>  — это ответ на вопрос из <h4>.

Далее нужно сделать примерный дизайн для FAQ.

CSS (SCSS)

С помощью 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 каркасе, то для этой переменной его тоже нужно поменять.

В целом логику работы данного скрипта я уже описал выше. Если у вас остались какие-либо вопросы — вы можете написать их ниже, к этой записи.