Делаем FAQ - часто задаваемые вопросы на сайте

Структуру нашего FAQ мы построим таким образом: каждый вопрос с ответом - это единый блок, соответственно, сколько вопросов, столько и блоков.

Вопросы мы будем помещать в тег h2, ответы в блок div с классом .answer:

Код

<h2>Вопрос</h2>
<div class="answer">Ответ</div>

Чтобы сэкономить место на странице, изначально мы скроем все ответы, оставив лишь вопросы.
При клике на вопрос будет показываться ответ, при повторном клике ответ вновь скрывается.

Итак, выбираем все блоки с классом .answer и скрываем их:

Код

  <script>
  $(document).ready(function() {
  $('.answer').hide();
  });
  </script>

Теперь выбираем все теги h2 и вешаем на них обработчик события click:

Код

  <script>
  $(document).ready(function() {
  $('.answer').hide();
  $('h2').click(function() {
  let $answer = $(this).next('.answer');
  });
  });
  </script>

Внутри анонимной функции обработчика создадим переменную $answer, в которую при помощи ключевого слова $(this) и функции next() мы каждый раз будем сохранять конкретно выбранный блок с классом .answer (именно тот блок, по заголовку которого произошел клик в данный момент).

Напоминаю, что функция next() находит элемент, следующий за элементом выборки. То есть, в данном случае, эта функция выбирает элемент, следующий за заголовком h2, то есть блок div с классом .answer
Указание класса .answer ещё более конкретизирует результат поиска.

А далее нам нужно добавить управляющую инструкцию, которая будет проверять, что если выбранный блок div в данный момент скрыт, то его нужно показать, иначе - скрыть.

Код

  <script>
  $(document).ready(function() {
  $('.answer').hide();
  $('h2').click(function() {
  let $answer = $(this).next('.answer');
  if($answer.is(':hidden')) {
  $answer.slideDown();
  } else {
  $answer.slideUp();
  }
  });
  });
  </script>

Вот, по сути, и весь скрипт, единственно мы ещё добавим иконку перед заголовком: когда ответ скрыт, перед заголовком будет иконка "+", говорящая о том, что этот блок можно раскрыть.
Когда ответ показывается, иконка меняется на минус. Делается это с помощью добавления и удаления класса .close

Код

  <script>
  $(document).ready(function() {
  $('.answer').hide();
  $('h2').click(function() {
  let $answer = $(this).next('.answer');
  if($answer.is(':hidden')) {
  $answer.slideDown();
  $(this).addClass('close');
  } else {
  $answer.slideUp();
  $(this).removeClass('close');
  }
  });
  });
  </script>

В CSS-стилях это реализуется следующим образом. Первоначально для тега h2 устанавливается фоновое изображение (изображение иконки с плюсиком):

Код

  h2 {
  font-size: 20px;
  background: url(plus.png) no-repeat 0 10px;
  cursor: pointer;
  padding: 10px 0 0 30px;
  font-weight: 400;
  }

И ещё добавим состояние для заголовка h2 с классом .close :

Код

  h2.close {
  background-image: url(minus.png);
  }

Здесь в качестве фонового изображения уже будет иконка с минусом. Вы можете посмотреть как работает наша страница с часто задаваемыми вопросами на демо-странице.

Примечание: функции slideDown() и slideUp() в скрипте выше плавно отображают и скрывают выбранный элемент соответственно.

Комментарии к материалу: