Показать скрыть слой (jQuery)

В jQuery есть несколько методов позволяющих скрыть или показать слой — это функции .show(), .hide(), .toggle().

Смотреть онлайн-пример

jQuery.show() / jQuery.hide()

Есть слой, который нужно одной кнопкой скрывать, другой показывать.

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Показать скрыть слой (jQuery)</title> <script type="text/javascript" src="/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#show").click(function () { $('#layer_show_hide').show(); }); $("#hide").click(function () { $('#layer_show_hide').hide(); }); }); </script> </head> <body> <input type="button" value=".hide() - Скрыть" id="hide"> <input type="button" value=".show() - Показать" id="show"> <div id="layer_show_hide"> <p><strong>Привет</strong></p> <p>Этот слой управляется двумя кнопками! Кнопкой <strong>.show() - Показать</strong> и <strong>.hide() - Скрыть</strong></p> </div> </body> </html>

jQuery.toggle()

Если нужно скрыть/показать слой одной кнопкой, то используем функцию .toggle().

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Показать скрыть слой (jQuery)</title> <script type="text/javascript" src="/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#toggle").click(function () { $('#layer_toggle').toggle(); }); }); </script> </head> <body> <input type="button" value=".toggle() - Переключатель" id="toggle"> <div id="layer_toggle"> <p><strong>Привет</strong></p> <p>Этот слой управляется кнопкой <strong>.toggle() - Переключатель</strong></p> </div> </body> </html>

Еще раз советую посмотреть пример онлайн.

Категории

ПрограммированиеJavaScriptБиблиотекиjQuery

Читайте также

Комментарии

Артём Фёдоров

Так .toggle('fast') или .toggle('slow')

Ответить
Вячеслав Мороз

С toogle все круто, только как сделать, чтобы появление было не внезапное, а плавное?

Ответить