Javascript.RU

Правильные show/hide/toggle

Как правильно реализовать универсальные функции show и hide для DOM элемента? Есть несколько распространенных вариантов, с различными граблями, которые мы рассмотрим, и выберем оптимальный.

Самое интересное, что даже самые лучшие show/hide функции из хороших javascript-библиотек не универсальны.

Рассмотрим самую простую функцию toggle:

function toggle(el) {
  el.style.display = (el.style.display == 'none') ? 'block' : 'none'
}

Недостатки такого подхода легко видеть. Например, ссылки <a href="...">имеют по умолчанию display: inline. А этот код поставит display = "block".

Для проверки - кликните на любом месте этого желтого div, при этом вызовется toggle ссылки. И затем - кликните еще раз для повторного toggle.

click ссылка me

Как видно, прячет оно нормально, а вот показ - некорректный.

Аналогичная проблема будет с ячейками таблицы, у которых по стандарту display: table-cell.

Этой проблемы лишен следующий вариант:

function toggle(el) {
  el.style.display = (el.style.display == 'none') ? '' : 'none'
}

Вместо block свойство display сбрасывается - при этом элемент получает display из CSS по умолчанию, то есть то, которое было изначально:

click ссылка me

Как видите, все работает верно.

Но при этом возникает другая проблема. Свойство display у элемента может отличаться от унаследованного из CSS, например:

<a href="#" style="display:block">...</a>

Или особое значение display могло быть установлено из javascript.

При этом обнуление display сбросит это особое значение.

В DIV ссылка - <a href="#" onclick="return false" style="display:block">. При повторном показе функция toggle сбрасывает display в значение по умолчанию, поэтому элемент будет показан уже с display:inline.

click ссылка me

Для лучшей применимости разобьем toggle на две части: show и hide и отладим их по отдельности.

Чтобы обойти описанную выше проблему с перезаписыванием display - при скрытии элемента будем записывать старое значение display в атрибут el.displayOld, а при показе - восстанавливать.

function hide(el) {
	if (!el.hasAttribute('displayOld')) {
		el.setAttribute("displayOld", el.style.display)
	}

	el.style.display = "none"
}

function show(el) {
	var old = el.getAttribute("displayOld");
	el.style.display = old || "";
}

Теперь show/hide для ссылки со своим display будет работать корректно.

Однако, и этот вариант - для нас не более чем промежуточный.

Функция hide работает отлично. О show такого не скажешь.

  1. Во-первых, вызов show до hide сбросит display. Это поведение - некорректное, его нужно поправить.
  2. Во-вторых, что более важно, если элемент спрятан CSS-классом, то show его не покажет.

    Например, show не покажет ссылку из этого примера:

    <style>
    .hidden {display:none}
    </style>
    <a href="#" class="hidden">Ссылка</a>
    

Чтобы решить эти проблему, функция show должна знать, показывается ли элемент реально или нет. Это нам поможет сделать доступ к Computed Style - вычисленному стилю элемента, доступ к которому делается по-разному, в зависимости от браузера.

Следующая функция берет реальное значение display из Computed Style, то есть такое. которое получается в результате применения всех CSS-классов и свойств.

function getRealDisplay(elem) {
	if (elem.currentStyle) {
		return elem.currentStyle.display
	} else if (window.getComputedStyle) {
		var computedStyle = window.getComputedStyle(elem, null)

		return computedStyle.getPropertyValue('display')
	} 
}

Если элемент не показывается из-за CSS-класса, то getRealDisplay вернет для него 'none'.

displayCache = {} 

function show(el) {
	if (getRealDisplay(el) != 'none') return // (1)

	el.style.display = el.getAttribute("displayOld") || "" // (2)

	if ( getRealDisplay(el) === "none" ) { // (3)
		var nodeName = el.nodeName, body = document.body, display

		if ( displayCache[nodeName] ) { // (3.1)
			display = displayCache[nodeName]
		} else { // (3.2)
			var testElem = document.createElement(nodeName)
			body.appendChild(testElem)
			display = getRealDisplay(testElem)

			if (display === "none" ) { // (3.2.1)
				display = "block"
			}

			body.removeChild(testElem)
			displayCache[nodeName] = display
		}

		el.setAttribute('displayOld', display)  // (3.3)
		el.style.display = display
	}
}
  1. Проверка, показывается ли элемент. Эта строчка нужна для безопасности. Если ее убрать, то (2) обнулит свойство display, а оно могло быть нестандартным. Этот глюк присутствует в ряде javascript-библиотек, например, в jQuery (проверено в 1.4 на момент написания).

    Вы можете захотеть убрать эту строчку в целях оптимизации, чтобы сделать show быстрее.

    Но при этом show станет некорректно работать при вызове без предшествующего hide на элементе с нестандартным display.

  2. Получить старое значение display, если оно сохранено hide и поставить его элементу. Если старого значения нет - на безрыбье и рак рыба, просто обнуляем display.
  3. Показывается ли элемент? Элемент может не показываться, например, из-за того, что в его CSS классе прописано display:none. Если так, то для показа элемента придется найти и применить подходящее значение display.

    Где взять значение display для показа изначально скрытого элемента? Это совсем не обязательно block, т.к. элемент мог быть ссылкой, ячейкой таблицы, да и вообще - "правильный" display для показа элемента зависит от места, времени и настроения программиста.

    В блоке (3.2) функция помещает элемент с таким же тэгом в конец <body> и получает его display, которое кеширует во вспомогательном объекте displayCache. Конечно, это всего лишь догадка, однако в простых случаях она работает.

    Этот display и используется для назначения элементу.

    1. Попробовать получить правильное значение display из кэша.
    2. В кэше нет - добавляем пустой тэг к <body>, затем берем его display.
      1. Если и этот тэг имеет реальный display:none - угадать не получилось. Возьмем block: что еще делать, элемент-то показать надо.
    3. Угаданное значение display применяем к элементу и сохраняем для дальнейшего использования.

Итак, теперь на основе show и hide можно сделать функцию toggle, которая видимый элемент скрывает, а невидимый - наоборот, показывает. Иначе говоря, переключает состояние элемента.

Функция toggle сама по себе очень проста:

function toggle(el) {
	isHidden(el) ? show(el) : hide(el)
}

Для ее работы необходима вспомогательная функция isHidden, которая определяет, виден ли элемент. Само собой, имеется в виду реальная видимость, а не свойство display элемента.

Используем для этого трюк с offsetWidth/offsetHeight:

function isHidden(el) {
	var width = el.offsetWidth, height = el.offsetHeight,
		tr = el.nodeName.toLowerCase() === "tr"

	return width === 0 && height === 0 && !tr ?
		true : width > 0 && height > 0 && !tr ? false : getRealDisplay(el)
}

Эта реализация пытается получить ответ, по возможности используя проверку offsetWidth/offsetHeight, т.к. это быстрее, чем getRealDisplay.

Итак, вот итоговый код toggle.js.

function getRealDisplay(elem) {
	if (elem.currentStyle) {
		return elem.currentStyle.display
	} else if (window.getComputedStyle) {
		var computedStyle = window.getComputedStyle(elem, null )

		return computedStyle.getPropertyValue('display')
	}
}

function hide(el) {
	if (!el.getAttribute('displayOld')) {
		el.setAttribute("displayOld", el.style.display)
	}

	el.style.display = "none"
}

displayCache = {}

function isHidden(el) {
	var width = el.offsetWidth, height = el.offsetHeight,
		tr = el.nodeName.toLowerCase() === "tr"

	return width === 0 && height === 0 && !tr ?
		true : width > 0 && height > 0 && !tr ? false :	getRealDisplay(el)
}

function toggle(el) {
	isHidden(el) ? show(el) : hide(el)
}


function show(el) {

	if (getRealDisplay(el) != 'none') return

	var old = el.getAttribute("displayOld");
	el.style.display = old || "";

	if ( getRealDisplay(el) === "none" ) {
		var nodeName = el.nodeName, body = document.body, display

		if ( displayCache[nodeName] ) {
			display = displayCache[nodeName]
		} else {
			var testElem = document.createElement(nodeName)
			body.appendChild(testElem)
			display = getRealDisplay(testElem)

			if (display === "none" ) {
				display = "block"
			}

			body.removeChild(testElem)
			displayCache[nodeName] = display
		}

		el.setAttribute('displayOld', display)
		el.style.display = display
	}
}

Пример работы вы можете увидеть на отдельной страничке.

Открыть пример в новом окне

Эта универсальная функция toggle широко используется в различных библиотеках, в частности, в jQuery.

Теперь вы знаете, что она делает ряд лишних операций, и если вдруг ваш toggle заглючит - представляете, в чем может быть дело.

Пусть ваш toggle всегда работает так, как задумано!


Автор: 4vanger, дата: 11 января, 2010 - 22:03
#permalink

1) не мешало бы добавить проверку на not null для el и на соответствующие nodeType
2) Мне кажется, что для хранения старого значения лучше использовать JS поле - в простейшем случае el.displayOld, а лучше отдельный глобальный хэш.
Модифицировать коллекцию аттрибутов - как-то нехорошо.


Автор: Kolyaj, дата: 12 января, 2010 - 12:39
#permalink

Правильный hide

function hide(el) {
    el.className += ' element_hide';
}

А в CSS-классе element_hide уже выставляются нужные свойства, будь то display: none, left: -9999px, visibility: hidden или что-то ещё. Т.е. функции show/hide вообще не нужны, нужны addClass/removeClass.


Автор: atxquadro, дата: 9 марта, 2010 - 17:03
#permalink

Не плохо бы проверочку сделать было бы на существование этого класса element_hide у этого элемента.


Автор: Илья Кантор, дата: 11 ноября, 2010 - 18:24
#permalink

Хорошее дополнение, как правило класс действительно лучше, да.


Автор: Ром (не зарегистрирован), дата: 18 июля, 2013 - 00:25
#permalink

Полностью согласен.
Концепт такой:

function hasClass(elm, class) {
    var RE;
    try {
        RE = new RegExp('^(.*\\s)?' + class + '\\s.*$');
    } catch (e) {
        return -1;
    }
    if (RE && elm && elm.className) {
        return RE.test(elm.className);
    } else {
        return -2;
    }
}

function addClass(elm, class) {
    if (elm && elm.className) {
        elm.className += (el.className.length == 0) '' : ' ';
        elm.className += class;
    }
}

function removeClass(elm, class) {
    if (elm && elm.className) {
        var A = elm.className.split(' ');
        for (var i = 0; i < A.length; i++) {
             if (A[i] == class) {
                 A.splice(i, 1);
             }
        }
        elm.className = A.join(' ');
    }
}

function toggleClass(elm, class) {
    if (elm && elm.className && hasCalss(elm, class) === true) {
        removeClass(elm, class);
    } else {
        addClass(elm, class);
    }
}

ЦСС, соответственно, содержит правила, как показывать (инлайн, блок,...) и как прятать (дисплей, визибилити, позишн, опейсити,...) конкретно этот елемент. Как бонус - мы разделяем поведение (js) и вид (css).

ПС: код не проверял, пишу по старой памяти. Если есть ошибки - укажите.
ППС: Лучше навешать эти функции как методы на ДОМ-обьект, тогда можно обойтись без elm (заменить на this).


Автор: vanicon (не зарегистрирован), дата: 17 января, 2010 - 21:03
#permalink

при отображении вкладок tabs использовал такой вариант

$(document).ready(function(){

$('#tabsTitle li').mouseover(function(){ $('#content4 > div').hide();

$('#' + $(this).attr('class')).toggle(); });

});

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


Автор: kirilloid (не зарегистрирован), дата: 19 января, 2010 - 06:32
#permalink

Записывать id или номер текущей вкладки при каждом изменении в location.hash, а при первой загрузке страницы читать location.hash и переключать программно.
Даже более-менее семантично.


Автор: Гость (не зарегистрирован), дата: 31 августа, 2010 - 01:11
#permalink

кста по такому принципу вконтакте списки с выборкой работают


Автор: cooli0, дата: 29 января, 2010 - 18:18
#permalink

Абсолютно согласен с Kolyaj. На самом деле, никогда нельзя обращаться из JS к свойству style, если на то нет весомых причин, которой может являться, к примеру, анимация. Во-первых изменения стиля из джаваскрипта - медленная операция, а во-вторых - не кашерно. Я уверен, что если посчитать(в байтах) ваш код и реализацию css classes+js, то в итоге второй вариант выйграет даже здесь.


Автор: atxquadro, дата: 9 марта, 2010 - 17:05
#permalink

когда ты пишешь javascript-код для своего сайта, то удобней, может, с классами (тоже кстати, классы использую).
А вот когда ты делаешь универсальный код (библиотеку, например), то тогда приходится так.


Автор: Гость (не зарегистрирован), дата: 6 марта, 2010 - 16:48
#permalink

если элемент изначально скрыт, ни show(), ни toggle() его не покажет


Автор: YISHIMITSY, дата: 19 марта, 2010 - 17:54
#permalink

По моему, в hide не помешает тоже добавить проверку на isHidden(el), иначе если hide будет вызван 2 раза подряд, show поставит ему block вместо изначального значения...


Автор: Aleko (не зарегистрирован), дата: 28 апреля, 2010 - 07:55
#permalink

Написал аналог toggle но с запоминание на печеньках. Защиты от дураков (как в статье выше) нет, поэтому желательно заранее знать, к каким элементам мы его будем применять.

Код:

(toggle=function(c){var a=(document.cookie.match(/hiddenData=([\w\|]+)/)||[,','])[1].split('|'),b=-1,d={};try{if(c)a.push((document.getElementById(c).style.display=='none')*1+c)}catch(e){return}while(a[++b]){try{document.getElementById(a[b].substr(1)).style.display=a[b].charAt(0)>0?'':'none';d[a[b].substr(1)]=a[b]}catch(e){continue}}a=[];for(key in d){a.push(d[key])}document.cookie="hiddenData="+a.join("|")+"; expires=Mon, 1 Jan 3000 00:00:00 UTC"})()

Использование:

toggle(id элемента)

При загрузке странички скрипт проверит печеньку и скроет или покажет нужные элементы.


Автор: Nominus umbra, дата: 28 апреля, 2010 - 08:22
#permalink

А зачем вообще трогать display?
Это семантически разве верно?
display отвечает за модель отображения контента.
За видимость отвечает visibility.
Разве не проще просто его включать-выключать?


Автор: B@rmaley.e><e, дата: 28 апреля, 2010 - 11:25
#permalink

Вот только visibility сохраняет пространство, занимаемое элементом.


Автор: Гость (не зарегистрирован), дата: 7 мая, 2010 - 22:27
#permalink

Взял скрипт toggle.js с этой страницы.
Код HTML:

Интересующие меня элементы:

таблица нормально скрыта, должна показываться как:

В IE6 и Opera все работает идеально. Firefox ругается:
el.nodeName is undefined на строку tr = el.nodeName.toLowerCase() === "tr"
(width и height в пред. строке тоже не работают)

Как исправить?


Автор: Гость (не зарегистрирован), дата: 7 мая, 2010 - 22:31
#permalink

Sorry, еще раз код

<input type="checkbox" onclick="toggle(content)" title="Показать/скрыть архивные записи" value="0" name="show_archive">
...
<table cellspacing="0" cellpadding="0" border="1" width="100%" style="display: none; color: rgb(159, 160, 156);" id="content">
...
<TABLE width="100%" border="1" cellpadding="0" cellspacing="0" id="content" style="display:table; margin: 0px; color: #9FA09C">

Автор: Гость (не зарегистрирован), дата: 13 июня, 2010 - 21:16
#permalink

Если пытаться применить функцию toggle отсюда:
http://javascript.ru/files/toggle/toggle.js
к изначально скрытой таблице, в Опере все работает нормально, а FF 3.6 присваивает переменной el не id-шник интересующей меня таблицы, а объект Window. Как изменить скрипт, чтобы он работал во всех браузерах, не привязываясь к конкретной разметке?
З.Ы. В IE6 тоже не работает, но работоспособность в IE не требуется :-)


Автор: Гость (не зарегистрирован), дата: 16 июня, 2010 - 11:32
#permalink

Пытаюсь применить данный скрипт
http://javascript.ru/files/toggle/toggle.js
для показа/скрытия таблицы. В Opera работает идеально, а FF 3.6 и IE при вызове функции isHidden() при изначально скрытой таблице выставляют объектом el не интересующую меня таблицу, а объект Window.
Есть ли способ сделать скрипт универсальным для Opera и FF не приписывая отдельно больших кусков под FF ?


Автор: kibal4iw, дата: 25 июня, 2010 - 16:02
#permalink
onclick="toggle(document.getElementById('content'))"

или же если нужно скрыть этот элемент

onclick="toggle(this)"

Автор: Гость (не зарегистрирован), дата: 21 июля, 2010 - 21:00
#permalink

toggle(this) прекрасно скроет сам чекбокс, чего мне не надо.
Мне нужно по чекбоксу показывать/скрывать таблицу с id="content"
Таблица изначально скрыта (display: none) поэтому FF похоже вообще не создает никаких элементов с таким id и toggle(document.getElementById('content')) тоже не отрабатывает.


Автор: Гость (не зарегистрирован), дата: 1 сентября, 2010 - 01:08
#permalink

таблицу изначально лучше не скрывать, придумайте альтернативу, багов не оберетесь..


Автор: Гость (не зарегистрирован), дата: 31 августа, 2010 - 01:19
#permalink

было бы интересно можно ли без цикла определить скрыт ли элемент типа

<div style="float:left"></div>

Учитывая что скрытым может быть и один из предков


Автор: Илья Кантор, дата: 11 ноября, 2010 - 18:35
#permalink

Да, можно, по offsetWidth == offsetHeight == 0. Работает на всех элементах, кроме TR, на них в нек случаях багает.


Автор: Maxman, дата: 11 января, 2011 - 10:01
#permalink

В процессе написания своего фреймворка, долго думал над этим. На ум пришёл такой вариант:

function hide(element) {
    // создадим элементу свойство, в которое запишем текущий дисплей
    element.realDisplay = element.currentStyle ? element.currentStyle["display"] 
    : getComputedStyle(element, null)["display"];
    // и скроем
    element.style.display = "none";
}
function show(element) {
    // берём записанный в realDisplay дисплей и устанавливаем
    // либо, ставим по умолчанию для данного элемента (сбрасываем)
    element.style.display = element.realDisplay || "";
}
function toggle(element) {
    // если элемент отображается
    if(!(element.offsetHeight == 0 && element.offsetWidth == 0)) {
        // скроем
        hide(element);
    } else {
        // если скрыт, покажем
        show(element);
    }
}

toggle(document.getElementById("test"));

Код намного короче, работает практически универсально.


Автор: alex.kostrukov (не зарегистрирован), дата: 29 апреля, 2011 - 22:38
#permalink

Спасибо, помогло =)


Автор: Maxman, дата: 12 мая, 2011 - 20:11
#permalink

Рад))


Автор: Гость (не зарегистрирован), дата: 10 октября, 2011 - 17:44
#permalink

однако если изначально (поставил в CSS) элемент имеет свойство display:none; то не работает.
в функции show "" не поставит (ff 7.0.1) свойство в изначальное такое как предполагается у элемента (если оно none) в w3c, например:
div - блочный элемент т.е. имеет по w3c значение display:block;
span - display:inline;

так вот как узнать у элемента какое у него по умолчанию w3c свойство display ?
document.defaultView им можно получить? если да, то как? smile


Автор: SolRus, дата: 10 октября, 2011 - 19:33
#permalink
function getRealDisplay(element) {
    return element.currentStyle ? element.currentStyle["display"] : getComputedStyle(element, null)["display"];
}
function show(element) { 
    if (element.realDisplay) element.style.display = element.realDisplay; 
    else {
        var testElem = document.createElement(element.nodeName);
        document.body.appendChild(testElem);
        element.style.display = getRealDisplay(testElem);
        document.body.removeChild(testElem);
    }
}
function hide(element) {
    element.realDisplay = getRealDisplay(element);
    element.style.display = "none";
}
function toggle(element) {
    (element.offsetHeight == 0 && element.offsetWidth == 0) ? show(element) : hide(element);
}

Автор: Гость (не зарегистрирован), дата: 22 февраля, 2011 - 10:15
#permalink

Ребят, ведь здесь не учитывается, что у скрываемывого элемента. например дива, есть есть еще вложенные элементы, которые автоматически унаследуют измененные свойства, а после его отображения унаследуют опять же, но это уже могут быть не совсем те свойства ???
Например внутри дива есть ссылки, таблицы и т.п.


Автор: Maxman, дата: 24 февраля, 2011 - 18:53
#permalink

Так display не наследуется.


Автор: Гость (не зарегистрирован), дата: 30 декабря, 2011 - 14:51
#permalink
echo '123';

Автор: Гость (не зарегистрирован), дата: 23 января, 2012 - 09:35
#permalink

Я не нахожу идею написания универсальной функции для этой цели здравой. Для каждого конкретного случая универсальная функция окажется избыточной.
Разумнее писать функцию под свой конкретный случай.


Автор: Гость (не зарегистрирован), дата: 17 февраля, 2012 - 20:30
#permalink

Доброго времени суток! может вы сможете мне помочь? мне надо чтобы вот в этом тексте

$(function () {

function makeTabs(contId) {
var tabContainers = $('#'+contId+' div.tabs > div');
tabContainers.hide().filter(':ID').show();

$('#'+contId+' div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('#'+contId+' div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':ID').click();
}

});

ID было не названием (сейчас ид (в ксс) материала у меня работает как просто название) а конкретным, уникальным номером задающим, свое, уникальное название-номер для таба.
Если не сложно конечно...


Автор: frant32, дата: 25 мая, 2012 - 20:07
#permalink

почему-то toggle не работет...
точнее не работает как нужно , срабатует просто как событие onclick ,но по второму клику ничего не происходит..

<style type="text/css">
div#mh {width:200px; height:30px; border-top-left-radius:12px; border-top-left-radius:12px; border-top-right-radius:12px; background:#00CCFF; font-size:18px; font-family: Impact; text-align:center; color: #FFFFFF; padding-top:3px;}
span#tri { border-color: red #00CCFF #00CCFF #00CCFF; border-style: solid;border-width:8px; position:absolute; left:150px; top:19px;}
</style>
<script type="text/javascript">

function toggle(eL) {
var eL=document.getElementById('tri');
    eL1='red #00CCFF #00CCFF #00CCFF';
	eL2='#00CCFF #00CCFF #00CCFF red';
	
  eL.style.borderColor = (eL.style.borderColor == eL1) ? eL2 :eL1  ;
}
</script>
<div id='mh'> Menu <span id='tri'  onclick="toggle()"></span> </div>
<div id='mb'>
  <div id='mtxt'></div>
</div>

Автор: Гость (не зарегистрирован), дата: 13 июня, 2012 - 16:26
#permalink

Ловите:

<script type="text/javascript">
	  
			
function slideToggleDiv(s){ 
	$('#filter').slideToggle(s); 			
}

</script>
...
<body onload="slideToggleDiv(0)">
...
<div id="filter">
	і
</div> 
<a href="javascript: slideToggleDiv(500);">Подробно</a>

Автор: Mygar (не зарегистрирован), дата: 9 сентября, 2012 - 18:01
#permalink

Здравствуйте.

Помогите пожалуйста, я в JS не силен. Пользуюсь вот таким вариантом:

function toggle(el)
{
myEl = document.getElementById(el);
myEl.style.display = (myEl.style.display == 'block') ? 'none' : 'block';
}

При этом в теле находятся вот такие ссылки:

ссылка 1
ссылка 2
ссылка 3
ссылка 4

Показать 1
Показать 2
Показать 3
Показать 4

Как сделать так, чтобы при смене у div id="one" display:none на display:block другим элементам обязательно задавался параметр display:none и при нажатии на "ссылка 2" открытое "Показать 1" исчезало, а "Показать 2" отображалось?


Автор: Mygar (не зарегистрирован), дата: 9 сентября, 2012 - 18:02
#permalink

Почему то код не написался...

Здравствуйте.

Помогите пожалуйста, я в JS не силен. Пользуюсь вот таким вариантом:

<script type="text/javascript">
 function toggle(el)
 {
 myEl = document.getElementById(el);
 myEl.style.display = (myEl.style.display == 'block') ? 'none' : 'block';
 }
 </script>

При этом в теле находятся вот такие ссылки:

<a href="#" onclick="toggle('one')>ссылка 1</a>
<a href="#" onclick="toggle('two')>ссылка 2</a>
<a href="#" onclick="toggle('three')>ссылка 3</a>
<a href="#" onclick="toggle('four')>ссылка 4</a>

<div id="one" style="display:none">Показать 1</div>
<div id="two" style="display:none">Показать 2</div>
<div id="three" style="display:none">Показать 3</div>
<div id="four" style="display:none">Показать 4</div>

Как сделать так, чтобы при смене у div id="one" display:none на display:block другим элементам обязательно задавался параметр display:none и при нажатии на "ссылка 2" открытое "Показать 1" исчезало, а "Показать 2" отображалось?


Автор: Гость (не зарегистрирован), дата: 10 сентября, 2012 - 00:08
#permalink

Увас небольшая ошибка в html-коде, а именно не закрыт атрибут onclick.


Автор: Гость (не зарегистрирован), дата: 17 октября, 2012 - 03:47
#permalink

Старые версии IE не поддерживают setAttribute, только setAttributeNode.


Автор: Kerny (не зарегистрирован), дата: 20 марта, 2013 - 15:14
#permalink

Не пойму, почему просто не юзать visibility?


Автор: luanre@gmail.com (не зарегистрирован), дата: 19 июля, 2013 - 20:29
#permalink

visibility не освобождает место, выделенное под элемент


Автор: Гость (не зарегистрирован), дата: 20 июля, 2014 - 17:27
#permalink

Вот моя версия простейшего анимированного тоггла:

function toggle(elem, animdelay, displaytype)
{
var stime = animdelay * 1000
elem.style.transition = animdelay+"s";
if(elem.style.display != 'none')
{
elem.style.opacity = '0';
setTimeout(function()
{
elem.style.display = 'none';
}, stime);
}
else
{
elem.style.display = displaytype;
setTimeout(function()
{
elem.style.opacity = '1';
}, 1);
}
}

Применение:

<div id='txt'>Hello World!</div>
<button onclick='toggle(getElementById("txt"), 1, "block");'>Toggle</button>

Автор: system (не зарегистрирован), дата: 18 октября, 2014 - 17:24
#permalink

Здравствуйте.
Не подскажите, как скрыть блок div на определенной странице, то есть при переходе по определенному адресу, например на главную страницу?
Спасибо.


Автор: kezzyhko (не зарегистрирован), дата: 3 августа, 2016 - 07:28
#permalink

А почему работаем с css-свойством display? Есть же универсальный атрибут hidden, с ним все вообще в одну строчку

function toggle(el) {
    el.hidden=!el.hidden;
}

Автор: Гость (не зарегистрирован), дата: 23 июня, 2017 - 13:41
#permalink

В функции isHidden допущена ошибка:

финальная проверка должна выглядеть как:

getRealDisplay(el) === 'none'


Автор: Разработчик (не зарегистрирован), дата: 11 июня, 2018 - 12:24
#permalink

Отличный инструмент, однозначно стоит использовать. Читать статьи websash


Автор: samuelddarden (не зарегистрирован), дата: 4 июня, 2019 - 13:57
#permalink

Мне полезно читать это. Мне нужно узнать больше на эту тему. Спасибо за письмо этот удивительный пост. free fire garena


Автор: Гость (не зарегистрирован), дата: 8 июня, 2019 - 12:01
#permalink

Отличный инструмент, однозначно стоит использовать. порно бесплатно


Автор: Гость (не зарегистрирован), дата: 8 июня, 2019 - 12:04
#permalink

Старые версии IE не поддерживают setAttribute, только setAttributeNode. порно ролики


Автор: minion89 (не зарегистрирован), дата: 14 августа, 2019 - 12:42
#permalink

The approach to the problem you share is interesting and interesting. I would love to read your article. It really helped me a lot. Thanks for sharing.
temple run


Автор: osama shk (не зарегистрирован), дата: 29 января, 2020 - 14:15
#permalink

I just couldn't leave your website before telling you that I truly enjoyed the top quality info you present to your visitors? Will be back again frequently to check up on new posts.
go here


Автор: osama shk (не зарегистрирован), дата: 1 февраля, 2020 - 14:21
#permalink

This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.
cryptocurrency news


Автор: osama shk (не зарегистрирован), дата: 12 февраля, 2020 - 18:58
#permalink

Awesome and interesting article. Great things you've always shared with us. Thanks. Just continue composing this kind of post.
learn here


Автор: osama shk (не зарегистрирован), дата: 19 февраля, 2020 - 16:49
#permalink

Great post, you have pointed out some fantastic points , I likewise think this s a very wonderful website.
homicide cleanup


Автор: Гость (не зарегистрирован), дата: 23 февраля, 2020 - 19:41
#permalink

I really thank you for the valuable info on this great subject and look forward to more great posts. Thanks a lot for enjoying this beauty article with me. I am appreciating it very much! Looking forward to another great article. Good luck to the author! All the best!
Body Line


Автор: osama shk (не зарегистрирован), дата: 24 февраля, 2020 - 20:05
#permalink

I found this is an informative and interesting post so i think so it is very useful and knowledgeable. I would like to thank you for the efforts you have made in writing this article.
Truly Lovely Kitchen


Автор: osama shk (не зарегистрирован), дата: 18 марта, 2020 - 15:11
#permalink

Only aspire to mention ones content can be as incredible. This clarity with your post is superb and that i may think you’re a guru for this issue. High-quality along with your concur permit me to to seize your current give to keep modified by using approaching blog post. Thanks a lot hundreds of along with you should go on the pleasurable get the job done.
結婚指輪


Автор: osama shk (не зарегистрирован), дата: 21 марта, 2020 - 12:37
#permalink

Your article has piqued a lot of positive interest. I can see why since you have done such a good job of making it interesting.
結婚指輪 福岡


Автор: osama shk (не зарегистрирован), дата: 21 марта, 2020 - 22:43
#permalink

You have done a great job on this article. It’s very readable and highly intelligent. You have even managed to make it understandable and easy to read. You have some real writing talent. Thank you.
婚約指輪


Автор: osama shk (не зарегистрирован), дата: 22 марта, 2020 - 23:30
#permalink

Thanks for taking the time to discuss this, I feel strongly that love and read more on this topic. If possible, such as gain knowledge, would you mind updating your blog with additional information? It is very useful for me.
結婚指輪 手作り


Автор: fnaf (не зарегистрирован), дата: 17 апреля, 2020 - 12:07
#permalink

Great because of the knowledge you share with us, I will always follow your blog and will share your blog with my friends.
fnaf


Автор: suka chu (не зарегистрирован), дата: 9 июня, 2020 - 06:43
#permalink

Thank you for sharing this great post, I am very impressed with your post, the information given is very meticulous and easy to understand. I will often follow your next post. driving directions


Автор: Keto pills (не зарегистрирован), дата: 11 августа, 2020 - 10:02
#permalink

This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information...Keto pills


Автор: peter johnee1 (не зарегистрирован), дата: 11 августа, 2020 - 10:22
#permalink

Где взять значение display для показа изначально скрытого элемента? cookie clicker


Автор: osama shk (не зарегистрирован), дата: 21 октября, 2020 - 13:48
#permalink

This is just the information I am finding everywhere. Thanks for your blog, I just subscribe your blog. This is a nice blog..
ที่เที่ยวพังงา


Автор: 먹튀검증 (не зарегистрирован), дата: 22 ноября, 2020 - 06:03
#permalink

It’s actually a nice and useful piece of info.
I am glad that you simply shared this helpful info with
us. Please keep us up to date like this. Thanks for sharing 먹튀검증


Автор: 대출 (не зарегистрирован), дата: 22 ноября, 2020 - 06:03
#permalink

It’s very effortless to find out any topic on net as compared to textbooks, as I
found this paragraph at this website. 대출


Автор: osama shk (не зарегистрирован), дата: 26 декабря, 2020 - 18:31
#permalink

Very nice article, I enjoyed reading your post, very nice share, I want to twit this to my followers. Thanks!.
Domotique


Автор: osama shk (не зарегистрирован), дата: 28 декабря, 2020 - 12:20
#permalink

Good website! I truly love how it is easy on my eyes it is. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which may do the trick? Have a great day!
デジタルノマド


Автор: sadas (не зарегистрирован), дата: 28 декабря, 2020 - 21:22
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
visit here


Автор: osama shk (не зарегистрирован), дата: 2 января, 2021 - 19:04
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
abonnenten24


Автор: osama shk (не зарегистрирован), дата: 3 января, 2021 - 14:20
#permalink

I'm glad I found this web site, I couldn't find any knowledge on this matter prior to.Also operate a site and if you are ever interested in doing some visitor writing for me if possible feel free to let me know, i am always look for people to check out my web site.
Automação de Hotéis


Автор: osama shk (не зарегистрирован), дата: 3 января, 2021 - 14:21
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
Automação de Hotéis


Автор: osama shk (не зарегистрирован), дата: 3 января, 2021 - 18:50
#permalink

I have not any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us.
digital marketing


Автор: osama shk (не зарегистрирован), дата: 16 января, 2021 - 11:29
#permalink

Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place..
alquiler de carros en barranquilla


Автор: osama shk (не зарегистрирован), дата: 18 января, 2021 - 17:31
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
Hausautomation


Автор: OtherWhatsapp (не зарегистрирован), дата: 19 января, 2021 - 09:45
#permalink

Because Wordpress is an empty source blogging tool, meaning that it's free and open to everyone, it's a prime target for hackers and ne'er-do-wells. Of course,the Wordpress development team are tireless in constantly working at the script for our own benefit, but none of them of any use if we don't actually getup off our backsides and do a little bit Whatsapp GB APK of are employed at our blogs behind the scenes.


Автор: osama shk (не зарегистрирован), дата: 19 января, 2021 - 15:07
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
tree surgeons colchester


Автор: osama shk (не зарегистрирован), дата: 23 января, 2021 - 14:54
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
coronavirus isla mujeres


Автор: osama shk (не зарегистрирован), дата: 31 января, 2021 - 17:23
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
best places to eat in cozumel


Автор: osama shk (не зарегистрирован), дата: 2 февраля, 2021 - 15:58
#permalink

I can set up my new idea from this post. It gives in depth information. Thanks for this valuable information for all,..
خانه هوشمند


Автор: osama shk (не зарегистрирован), дата: 8 февраля, 2021 - 00:21
#permalink

This is just the information I am finding everywhere. Thanks for your blog, I just subscribe your blog. This is a nice blog..
covid isla mujeres


Автор: Гостьsad (не зарегистрирован), дата: 10 февраля, 2021 - 07:03
#permalink

I have been checking out a few of your stories and i can state pretty good stuff. I will definitely bookmark your blog
chemical


Автор: osama shk (не зарегистрирован), дата: 17 февраля, 2021 - 11:57
#permalink

Thanks for taking the time to discuss this, I feel strongly that love and read more on this topic. If possible, such as gain knowledge, would you mind updating your blog with additional information? It is very useful for me.
belföldi fuvarozás versenyképesség


Автор: osama shk (не зарегистрирован), дата: 24 февраля, 2021 - 12:59
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
otomatisasi rumah


Автор: osama shk (не зарегистрирован), дата: 2 марта, 2021 - 10:55
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
elérhető pályázatírás Debrecen


Автор: Гостьsad (не зарегистрирован), дата: 2 марта, 2021 - 16:21
#permalink

Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place..
how to get to cozumel from cancun airport


Автор: farhan fave (не зарегистрирован), дата: 23 марта, 2021 - 09:09
#permalink

I read that Post and got it fine and informative. Please share more like that...
treatnheal


Автор: osama shk (не зарегистрирован), дата: 4 апреля, 2021 - 13:15
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
bathroom vanity


Автор: osama shk (не зарегистрирован), дата: 12 апреля, 2021 - 14:05
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
coronavirus cozumel


Автор: osama shk (не зарегистрирован), дата: 14 апреля, 2021 - 16:15
#permalink

Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place..
taroko gorge day tour


Автор: WhatsApp 2021 (не зарегистрирован), дата: 16 апреля, 2021 - 09:58
#permalink

WhatsApp Aero 2021 will help you find new friends and I also want to make new friends


Автор: symji (не зарегистрирован), дата: 17 апреля, 2021 - 10:01
#permalink

Your article is very useful, the content is great, I have read a lot of articles, but for your article, it left me a deep impression, thank you for sharing. basketball legends


Автор: essex sex chat (не зарегистрирован), дата: 7 июня, 2021 - 17:27
#permalink

Visit the most popular web platform for free casual sex contacts with hot ladies in UK - essex sex chat


Автор: jogazy jogazy (не зарегистрирован), дата: 9 июня, 2021 - 19:45
#permalink

The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface.
things to do in cozumel


Автор: Orlando Mcbride (не зарегистрирован), дата: 10 июня, 2021 - 11:09
#permalink

Спасибо, что поделились, вы можете скачать FmWhatsApp совершенно бесплатно здесь


Автор: farhan (не зарегистрирован), дата: 14 июня, 2021 - 23:16
#permalink

Thanks so much for sharing this awesome info! I am looking forward to see more posts by you!
St Thomas Boat Charters


Автор: farhan (не зарегистрирован), дата: 25 июня, 2021 - 17:33
#permalink

This is very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post!
staffing software


Автор: casual encounters bristol (не зарегистрирован), дата: 5 июля, 2021 - 17:02
#permalink

Great article and very informative thanks for share it. Must check my link casual encounters bristol


Автор: Гостьasa (не зарегистрирован), дата: 6 июля, 2021 - 22:47
#permalink

This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post.Osteopathie Wiesbaden


Автор: sheffield slags (не зарегистрирован), дата: 13 июля, 2021 - 12:06
#permalink

sheffield slags is the most valuable web platform created for your own sexy chat pleasure with local ladies in United Kingdom


Автор: CamilleElliott (не зарегистрирован), дата: 14 июля, 2021 - 11:20
#permalink

Thanks for sharing. You can try whatsapp aero click here is a great messaging and calling app with lots of cool features that you will lov


Автор: Joan Foster (не зарегистрирован), дата: 17 июля, 2021 - 07:54
#permalink

You can also refer to some other gb whatsapp versions at https://heymods.net/fr/gb-whatsapp with the best quality.


Автор: sex chat liverpool (не зарегистрирован), дата: 17 июля, 2021 - 21:26
#permalink

Check out the best hot chat contact in UK right here right now sex chat liverpool


Автор: sex chat liverpool (не зарегистрирован), дата: 17 июля, 2021 - 21:26
#permalink

Check out the best hot chat contact in UK right here right now sex chat liverpool


Автор: slags in Coventry (не зарегистрирован), дата: 9 августа, 2021 - 15:22
#permalink

slags in Coventry is probably the best web platform for free chat with local girls in UK, so check out and enjoy


Автор: cory day (не зарегистрирован), дата: 11 августа, 2021 - 05:50
#permalink

Благодарим ви, че споделихте, можете да изтеглите whatsapp plus gratis напълно безплатно тук, за да можете да изпращате текстови съобщения и да се обаждате напълно безплатно


Автор: Гостьsd (не зарегистрирован), дата: 11 августа, 2021 - 14:59
#permalink

This is a good post. This post gives truly quality information. I’m definitely going to look into it. Really very useful tips are provided here. Thank you so much. Keep up the good works.
mega hair


Автор: Гостьsad (не зарегистрирован), дата: 17 августа, 2021 - 11:46
#permalink

I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post.
Resume


Автор: fave fave (не зарегистрирован), дата: 22 августа, 2021 - 12:58
#permalink

Thank you for helping people get the information they need. Great stuff as usual. Keep up the great work!!!
sample dcf model


Автор: jogazy jogazy (не зарегистрирован), дата: 25 августа, 2021 - 18:21
#permalink

Nice to read your article! I am looking forward to sharing your adventures and experiences.
denver to vail limo


Автор: jogazy jogazy (не зарегистрирован), дата: 28 августа, 2021 - 18:04
#permalink

This is my first time visit here. From the tons of comments on your articles,I guess I am not only one having all the enjoyment right here!
All-Terrain Electric Wheelchair


Автор: farhan (не зарегистрирован), дата: 31 августа, 2021 - 09:28
#permalink

Thanks, that was a really cool read!
롤강의


Автор: fave fave (не зарегистрирован), дата: 1 сентября, 2021 - 10:36
#permalink

Great content material and great layout. Your website deserves all of the positive feedback it’s been getting.
구글광고대행


Автор: farhan (не зарегистрирован), дата: 1 сентября, 2021 - 22:08
#permalink

I felt very happy while reading this site. This was really very informative site for me. I really liked it. This was really a cordial post. Thanks a lot!.
windows tips


Автор: prive sex vlaanderen (не зарегистрирован), дата: 2 сентября, 2021 - 16:38
#permalink

prive sex vlaanderen is the best web place if you are looking for hot chat with localladies


Автор: fave fave (не зарегистрирован), дата: 3 сентября, 2021 - 16:54
#permalink

Hello There. I found your blog using msn. This is an extremely well written article. I will be sure to bookmark it and return to read more of your useful information. Thanks for the post. I’ll certainly comeback.
프리서버


Автор: jogazy jogazy (не зарегистрирован), дата: 5 сентября, 2021 - 22:04
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
perfect health


Автор: adult chat (не зарегистрирован), дата: 7 сентября, 2021 - 19:24
#permalink

Find fine ladies for sexy chat contacts in UK and enjoy on our web platform adult chat


Автор: sex in berlin (не зарегистрирован), дата: 13 сентября, 2021 - 17:59
#permalink

sex in berlin is the best web place in whole Gremany for making sexy chat contacts with fine girls


Автор: Гостьsad (не зарегистрирован), дата: 16 сентября, 2021 - 08:54
#permalink

I like this post,And I guess that they having fun to read this post,they shall take a good site to make a information,thanks for sharing it to me.
유흥사이트


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
3 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum