Показать или скрыть элемент средствами jQuery
Несомненным трендом прошлого и этого годов становится использование интерактивных элементов на сайте, по поводу и без. Разрабатывая очередной проект столкнулся с необходимостью показывать/скрывать элемент по клику по ссылке. Возник вопрос, как реализовать показ/сокрытие элемента на странице самым простым и эффективным способом?
Для этого нам понадобится известная JS библиотека jQuery и немножко терпения.
Итак, в область <head> подключаем jquery:
<script type="text\javascript" src="jquery.min.js"></script>В область <body> прописываем HTML код:
<a href="javascript:return false;" id="act">Показать текст</a>
<div id="hide">Скрытый текст</div>Для того чтобы данная конструкция заработала нам необходимо добавить следующий код в макет. Я предпочитаю коды JS и jQuery добавлять в заголовок после объявления CSS.
<script type="text/javascript">
$(document).ready(function() {
$("#hide").hide();
$("#act").click(function () {$("#hide").toggle();});
});
</script>Несколько комментариев по данной конструкции. Я сознательно не присваиваю элементу #hide свойство display:none, а скрываю его через jQuery. Это сделано для того, чтобы пользователь с отключенным javascript увидел скрытый текст. Мною используется функция toggle(), которая сама определяет статус сокрытия элемента и в зависимости от него применяет к нему методы hide() или show(). Можно конечно обойтись без toggle(), используя hide() и show(), но зачем, когда придется писать проверку статуса элемента, а наш вариант заведомо короче и понятнее.
UPDATE: Выложил вариант улучшенного кода как показывать/скрывать элемент jQuery.
Комментарии (0)