четверг, 24 марта 2011 г.

JQuery – раскрывающийся список.

Немного отойду от темы СЕО и приведу пример простого но рабочего раскрывающегося списка на jQuery.

Зачастую некоторые элементы на странице нужно скрыть, и показывать их только при необходимости, таким образом компактно уместив их в невидимый контейнер. Как это реализуется рассмотрим далее.



Подключаем JQuery в странице:

<script type="text/javascript" src="jquery.js"></script>
 
Далее в секции head прописываем:

<script type="text/javascript">
    function togg_news()
    {$("#news").toggle(500);} //Внимание на news и цифру 500
</script>
 
Итак, тут мы указали что будем сворачивать/разворачивать блок news со скоростью 500 км/ч :) Скорость можно менять.
Далее находим на странице место под наш блок. Нашли. И пишем там следующее:

<a title="Открыть-Закрыть" onclick="togg_news()"
href="javascript:void(0);">Отркыть закрыть</a>
<div id="news" style="display: none;">
<p>Здесь выводим огромный блок который
раскроется при щелчке на "Открыть-Закрыть".</p>
</div>


Результат посмотрите вот туточки, так как в блогспоте не подключен jquery

Комментариев нет: