Развертывание / сворачивание блока с текстом на 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>

Другие посты, близкие по теме:

  1. Вводный курс jQuery – Тест
  2. checkbox в стиле iPhone
  3. Движение картинки при наведении курсора
  4. Загрузка файла одним кликом
  5. jQuery WYSIWYG
]]>

Добавить в закладки
Memori БобрДобр Google Яндекс Твиттер del.icio.us Мистер Вонг МоёМесто MyScoop RuSpace Сто закладок

]]>

Теги: ,

августа 2, 2009

2 комментариев по “Развертывание / сворачивание блока с текстом на jQuery”

  1. ]]>radist]]> сказал:
    июня 16, 2010 в 22:01

    Привет всем! Очень классная статья мне понравилась, решил поставить его на свой сайт. почему-то при загрузки страницы он показывает скрытный текст… помогите, почему? Хотя по умолчанию он не должен показывать и в примере он не показывает,т.к. событий click не было, какая часть кода отвечает за это??? Зараннее спасибо.

  2. ]]>Spi4ka]]> сказал:
    июля 15, 2010 в 04:10

    сделано просто и действенно, но есть вопрос, в блоге когда идет вывод постов скрипт должен срабатывать несколько раз, а он лишь на первый вывод срабатывае а потом хз не работает, что делать? хелп!

Оставьте комментарий: