http://maxsof.ru/blog/2010/03/13/1/

За последнее время самой популярной и самой комментируемой стала запись о выпадающем тексте при нажатии на ссылку. Сегодня я расскажу о еще одном способе добиться желаемого результата с помощью библиотеки jQuery.

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

Начнем с того что создадим файл index.html:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="windows-1251">
	<title>Выпадающий текст при нажатии на ссылку с помощью jQuery</title>
	<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script>
		$(function() {
			$(".btn-slide").click(function() {
				$("#panel").slideToggle("slow");
				$(this).toggleClass("active"); return false;
			});
		});
	</script>
	<style>
		#panel {    
			display: none;
			padding: 5px;
			width: 400px;
			height: 200px;
			background: #09F;
			color: #FFF;
			}
		.btn-slide {
			background: #CCC;
			color: #06F;
			}
		.active {
			background: #FF9;
			}
	</style>
</head>
<body>
	<a href="" class="btn-slide">Нажми на меня!</a>
	<div id="panel">
		Lorem ipsum dolor sit amet, 
		consectetuer adipiscing elit, sed diam 
		nonummy nibh euismod tincidunt ut  
		laoreet dolore magna aliquam erat 
		volutpat. Ut wisi enim ad minim veniam, 
		quis nostrud exerci tation ullamcorper 
		suscipit lobortis nisl ut aliquip ex ea 
		commodo consequat. Duis autem vel eum 
		iriure dolor in hendrerit in vulputate 
		velit esse molestie consequat, vel 
		illum dolore eu feugiat nulla facilisis 
		at vero eros et accumsan et iusto odio 
		dignissim qui blandit praesent luptatum 
		zzril delenit augue duis dolore te 
		feugait nulla facilisi.
	</div>
</body>
</html>

Принцип работы скрипта состоит в следующем: после загрузки документа (строка 8) и при нажатии на ссылку с классом btn-slide (строка 9), панель с id=panel выдвигается и показывает свое содержимое (строка 10), при этом класс ссылки меняется на active (строка 11).

Вот собственно и все. Можно посмотреть демо.