Пример №3. Вопросы с ответами

Рассмотрим HTML пример скрытых блоков текста или, как их ещё называют, спойлеров. В тех случаях, когда информация структурирована на статьи, в которых имеются заголовок и содержание (это могут быть например вопросы с ответами), можно предложить программу, описанную в этом разделе. Программа позволяет скрыть все содержания статей (ответы на вопросы), что существенно уменьшит объем страницы. Но щелкая на заголовки (вопросы), можно показать или скрыть содержание (ответ).

Макет страницы

Разработка интерфейса (HTML и CSS)

Листинг HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="text2">
<p><em><strong>Вопросы с ответами</strong></em></p>
</div>
<div id="all">
<div class="content">
<div class="main">
<h3>Вопрос 1</h3>
<div class="answer">
<p>Ответ 1</p>
</div>
<h3>Вопрос 2</h3>
<div class="answer">
<p>Ответ 2</p>
</div>
<h3>Вопрос 3</h3>
<div class="answer">
<p>Ответ 3</p>
</div>
</div>
</div>
</div>
</body>
</html>

В CSS файле предусмотрены стили для заголовка, 2 стиля для вопросов (когда закрыт ответ и когда открыт ответ), а так же стиль для ответа.

Листинг CSS

h2 {
background: url(open.png) no-repeat 0 11px;
padding: 10px 0 0 15px;
cursor: pointer;
}
h2.close {
background-image: url(close.png);
}
.answer {
margin-left: 25px;
}
.main {
xxposition: absolute;
padding-bottom: 1em;
border-bottom: solid 1px rgba(255,255,255,.5);
xxoverflow:auto;
xxmin-height: auto;
}

При большом количестве вопросов, чтобы исключить лишнее листание, удобно скрыть все ответы и показывать или скрывать ответ при щелчке на соответствующий вопрос. Это и сделано с помощью jQuery. В коде выбираются элементы, для которых class=”answer” и скрываются (hide). Затем, в контейнере class=”main” выбираются заголовки h2, и для них задается реакция на щелчок мыши с помощью функции toggle, которая работает как переключатель, то есть учитывает текущее состояние ответа: если ответ скрыт, то его показывают (FadeIn), а если ответ показан – его скрывают (FadeOut). В коде так же добавлен эффект с помощью таблицы стилей, таким образом, что для ответа с классом close и без класса close используются разные стили. Это приводит к следующему…

Добавление интерактивности

Листинг jQuery

$(document).ready(function() {
$('.answer').hide();
$('.main h3').toggle(
function() {
$(this).next('.answer').fadeIn();
$(this).addClass('close');
},
function() {
$(this).next('.answer').fadeOut();
$(this).removeClass('close');
}
); // окончание функции toggle
}); // окончание функции ready

Контрольные вопросы

  • Какие данные используются в программе?
  • Что делает программа?
  • Каким образом достигается эффект появления символа «плюс», когда виден ответ?
  • Для чего в программе используются функции toggle (), next ()?
  • Для чего можно использовать эту программу?