Сегодня мы рассмотрим очень красивый скрипт jQuerly-эффект выпадающего текста.
Чтобы совсем вас не запутать, покажу вам пример целой страницы:
ПРИМЕР: http://nightillusion.ru/js1a.php

Код:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style type="text/css">
#panel {
    background: #a1a1a1;
    color: #000000;
    height: 200px;
    width: 200px;
    padding: 15px;    
    display: none;
}
.btn-slide {
    background: #a1a1a1;
    color: #000000;
}
.active {
    background: #bbbbbb;
}
</style>
</head>

<body>


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

<a href="" class="btn-slide">CLICK ME!!!</a>



<div id="panel">
You can see this text:)<br>
Have luck and fun!<br>
nightillusion.ru
</div>

</body>
</html>

А теперь разложим все по полочкам.
Во-первых, надо подключить в раздел head библиотеку jQuerly. Копируем маленький код, данный ниже:

Код:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Но одной библиотеки недостаточно. Будем двигаться сверху вниз. Теперь нужно поставить стили, которые вы потом сможете сами отредактировать.

Код:
<style type="text/css">
#panel {
    background: #a1a1a1;
    color: #000000;
    height: 200px;
    width: 200px;
    padding: 15px;    
    display: none;
}
.btn-slide {
    background: #a1a1a1;
    color: #000000;
}
.active {
    background: #bbbbbb;
}
</style>

Теперь пойдем в раздел body. Вставляем туда такой скрипт:

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

Осталось немного. Теперь надо поставить сам текст, который будет разворачиваться, и ссылку, при нажатии которой будет разворачиваться текст.

Код:
<a href="" class="btn-slide">CLICK ME!!!</a>



<div id="panel">
You can see this text:)<br>
Have luck and fun!<br>
nightillusion.ru
</div>

nightillusion