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

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

Начнем с того что создадим файл index.html, содержимое которого будет следующим:


----------------------------------------------------------------------------------
< html >< head >
< script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" >< /script >
< style type="text/css" >
#panel {
background: #0099FF;
color: #FFFFFF;
height: 200px;
width: 400px;
padding: 5px;
display: none;
}
.btn-slide {
background: #CCCCCC;
color: #0066FF;
}
.active {
background: #FFFF99;
}
< /style >
< /head >

< body >
< a href="" class="btn-slide" >Нажми на меня!< /a >

< script type="text/javascript" >
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
< /script >

< div id="panel" >
Тра-та-та, тра-та-та, мы ведём с собой кота...
< /div >

< /body >
< /html >
----------------------------------------------------------------------------------

Разберем более детально что к чему.

На 2-й строке мы подключаем библиотеку jQuery с официального сайта. Далее с 3-й по 19-ю строку идет CSS код, который Вы можете изменять или дополнять своими свойствами, тем самым изменяя внешний вид выпадающего блока с текстом. 23-я строка представляет собой ссылку, при нажатии на которую появляется скрытый текст.

Далее идет javascript код, работу которого я объясню чуть ниже.
И, наконец, завершает html код наша выпадающая панелька с любой всевозможной информацией.

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

Вот в принципе и все, не забудьте убрать лишние пробелы в тегах.

ДЕМО: выпадающий текст

PS: автором статьи Софронов Максим.