Главная
Новости
Статьи
Скрипты
Плагины
Сервисы

ГлавнаяСтатьи:

Показ/Скрытие блока

Начнем с простых примеров использования javascript в работе сайта, а именно — показ и скрытие блока. К примеру, формы ответа внизу каждого комментария на странице.

Допустим, у нас есть блок данных, который нужно показать только по клику по ссылке:

<div id="hidden_content" style="display: none;">скрытый контент</div>

Первый способ: jQuery
Очень простой и функциональный способ, однако придется подключать дополнительную библиотеку.

<a onclick="$('div#hidden_content').slideToggle('slow')">Показать/Скрыть блок</a>

В настройках можно указать скорость появления блока (slow/fast). Повторный клик скрывает блок.

Подробнее можно прочитать в документации jQuery.

Второй способ: чистый JavaScript
Занимает меньше места, однако не так функционален.
<script language="javascript" type="text/javascript">
function toggle(el) {
el.style.display = (el.style.display == 'none') ? '' : 'none'
}
</script>

И непосредственно сама ссылка:

<a onclick="toggle(hidden_content)">Показать/Скрыть блок</a>

Использовать можно любой способ, хотя второй более грубый и непредсказуемый.


Автор: Spryt




1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 4,78 out of 5)
Loading...

8 комментариев на “Показ/Скрытие блока”

  1. Gurylyov

    function openblok(id)
    {
    var smd = document.getElementById(id);
    sml=document.getElementsByTagName(«DIV»);
    for(i=0; i<sml.length;i++)
    if (sml[i].id.match(/blok/)&&!sml[i].id.match(id) ) sml[i].style.display = "none";
    smd.style.display == "block" ? smd.style.display = "none" : smd.style.display = "block";
    }

    а вот этот код открывает/скрывает те же блоки, но, при открытии второго такого же блока, первый закрывается.
    ссылка должна быть такой

    <a href=»#» onclick=»openblok(‘blok2’);return false» id=»but2″>показать/скрыть</a>
    и блок должен быть таким

    в ссылке и блоке двойка заменяется на номер блока соответственно.

    может быть подскажете, как это реализовать на jQuery? Код ведь заметно короче получается, к тому же jQuery всё равно уже подключен — терять нечего)))

  2. Spryt

    Gurylyov, интересный способ.

    На jQuery — переписать функцию наверное, стандартных кажется таких нет 🙂

    Ссылки поправил (WP вечно всю верстку портит)

  3. Gurylyov

    Я всё же поищу метод хоть немного сократить. Я гик оптимизаций. Благодарю за правку ссылок.

  4. Gurylyov

    Господи… Поставьте уже антиспам на комментарии по надёжнее, а-то всё ведь на почту приходит.

Оставить комментарий







Авторам:

Популярные статьи:

Web-просмотрщик картинок. Lightbox2 (14)
AJAX скрипт для определения Google Pagerank (13)
Карта кликов вашего сайта. ClickHeat (13)
Анимация загрузки: AjaxLoad (13)
Чекбокс с прозрачностью (10)