Сегодня мы рассмотрим очень красивый скрипт jQuerly-эффект выпадающего текста. ПРИМЕР
Чтобы совсем вас не запутать, покажу вам пример целой страницы:
Код:
<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
