Как показать и скрыть текст на JavaScript jQuery

Урок посвящен тому, как показать и спрятать текст, нажимая на ссылку-кнопку.
Это выглядит примерно таким образом:

Смотрите исходный код.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Пример</title>
<script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js»></script>
<style>
#hidden_menu_button {padding-top: 5px;padding-bottom: 10px;border:none; background: #ffffff;color:#1b618d;}
</style>
</head>
<body>
<input type=»button» id=»hidden_menu_button» value=»Здесь вы можете…» />
<div id=»hidden_menu» style=»display: none;»>
Пример-пример-пример<br>
Пример-пример-пример<br>
Пример-пример-пример<br>
Пример-пример-пример<br>
Пример-пример-пример<br>
Пример-пример-пример<br>
Пример-пример-пример<br>
Пример-пример-пример<br>
Пример-пример-пример<br>
</div>
<script type=»text/javascript»>
(function($) {
$(«#hidden_menu_button»).click(function() {
if ( $(«#hidden_menu»).is(«:hidden») ) {
$(«#hidden_menu»).slideDown(«normal»);
} else {
$(«#hidden_menu»).slideUp(«normal»);
}
});
})(jQuery);
</script>
</body>
</html>

Вуаля! Надеюсь пригодится )

Похожие записи:

  1. Динамичная галерея jCarousel и PHP
  2. Как заставить работать Ваш блог
  3. Галерея картинок на JavaScript Highslide
  4. Загрузка фотографий на сайт
  5. Устанавливаем captcha на сайт
  6. Визуальный редактор для админки WordPress
Запись опубликована в рубрике Создание сайтов с метками , , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий