Развертывание / сворачивание блока с текстом на jQuery
Категория JavaScripts (jQuery, AJAX)
Разворачивающийся и свертывающийся блок с текстомСегодня мы создадим развертывающийся при клике на ссылку блок с текстом.
Эффект очень простой, как и для реализации. Если вам что-то не понятно, прочитайте вводный курс в jQuery
Код:
<html>
<head>
<title>Развертывание / сворачивание на jQuery</title>
<style>
body{
padding:10px;
font-family:tahoma;
}
.jq{
text-decoration:none;
color:#000;
padding:10px;
border:1px solid #666;
}
.jq:hover{
background-color:#F39;
}
#box{
display:none;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery(function()
{
$('#q1').click(function()
{
$('#box').slideDown();
});
$('#q2').click(function()
{
$('#box').slideUp();
});
});
</script>
</head>
<body>
<p><a href="#" id="q1">развернуть</a><a href="#" id="q2">свернуть</a></p>
<div id="box">
<p>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
<p>Таким же способом можно запросто организовать <strong>выпадающее меню</strong></p>
<p><a href="http://webypoku.ru">ссылка на сайт</a></p>
</div>
</body>
</html>
Добавить в закладки
Memori
БобрДобр
Google
Яндекс
Твиттер
del.icio.us
Мистер Вонг
МоёМесто
MyScoop
RuSpace
Сто закладок
Оставьте комментарий: