FAQ on jQuery
Заказчику очень срочно понадобился на сайт компонент «Вопрос-ответ» и единственным его пожеланием было раскрываемость ответов при клике на вопрос. Недолго думая, пришла в голову идея использовать Definition List (dl), я считаю, что он как никто другой подходит для этих нужд, да и классов не надо придумывать специфических.
Не буду лить много воды, расскажу лишь как это все работает и приведу пример.
Первое, что нужно было сделать это разметка html.
Ну тут ничего сложного

1
2
3
4
5
6
7
8
<dl>
 <dt>Вопрос1</dt>
 <dd>Ответ на поставленный выше вопрос под номер 1,
который может содержать достаточно много информации,
порой и несколько абзацев, порой и несколько страниц</dd>
 <dt>Вопрос2</dt>
 <dd>и так далее...</dd>
</dl>

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

1
2
3
4
5
6
7
$('document').ready(function() {
   $('dl dd').hide();
   $('dl dt').click(function() {
      $('dl dd').slideUp('fast');
      $(this).next().slideDown('slow');
   });
});

Я предпочел скрывать ответы в скрипте для того, чтобы люди с выключенным JavaScript, могли тоже прочесть вопросы и ответы на них.

1
$(this).next()

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