Первым делом на понадобится сама библиотека JQuery, которую можно скачать здесь.
После того, как Вы скачали JQuery, поместите ее в любое место вашего сайта или страницы, но лучше создать отдельную папку js, чтобы в последующем кидать туда остальные скрипты, итак, положили JQuery в папку с сайтом, теперь нужно ее подключить:
<script type="text/javascript" src="js/jQuery.js"></script>
Теперь нам нужно написать функцию, которая скрывает и показывает элемент страницы:
<script type="text/javascript">
function diplay_hide (blockId)
{
if ($(blockId).css('display') == 'none')
{
$(blockId).animate({height: 'show'}, 500);
}
else
{
$(blockId).animate({height: 'hide'}, 500);
}
}</script>
Данная функция проверяет, если в css стиле блока (в моем случае это #blockID) стоит значение параметра display: none;, то показывает это элемент, иначе скрывает его, последний аргумент функции animate - 500 - задержка анимации в мс
Ну и теперь, приведу пример самого блока, который будет использовать нашу функцию:
<div id="block_id" style="display: none;"><p><b>Так работает JQuery</b></p></div>
Обязательно поставьте атрибут display: none; в css стиле данного блока, иначе в первоначально состоянии он будет показан на экране.
Ниже приведен полный код нашего скрипта:
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript">
function diplay_hide (blockId)
{
if ($(blockId).css('display') == 'none')
{
$(blockId).animate({height: 'show'}, 500);
}
else
{
$(blockId).animate({height: 'hide'}, 500);
}}
</script>
<a href="javascript:void(0)" onclick="diplay_hide('#block_id');">Пример</a>
<div id="block_id" style="display: none;"><p><b>Так работает JQuery</b></p></div>
Вместо onclick можно использовать другие обработчики событий, такие как onmouseover - событие при наведении мыши, onsubmit - событие, происходящее при отправке формы и пр.