Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как приклике скрыть один <div> и открыть другой <div> (https://javascript.ru/forum/dom-window/27376-kak-priklike-skryt-odin-div-i-otkryt-drugojj-div.html)

SpiritDark 11.04.2012 13:40

Как приклике скрыть один <div> и открыть другой <div>
 
Ребята помогите! Как приклике скрыть один <div> и что бы открылся другой <div> и наоборот
Вот пример есть:
<script>
function p(type){
param=document.getElementById(type);
if(param.style.display == "none") param.style.display = "block";
else param.style.display = "none"
}
</script>

<a href="#" onClick="p('3'); return false;">показать/скрыть</a>
<div id="2" style="display:yes">
Скрытый текст
</div>

<div id="3" style="display:none">
Скрытый текст
</div>
:cray: :cray:
Заранее спасибо!

vasiliy_shkolniy 11.04.2012 15:35

Если имеется ввиду чтобы просто заменялся на display:none (спойлер), то мне нравится этот

<HTML> 
 <HEAD> 
 <TITLE>Скрипт</TITLE> 
<style type="text/css"> 
BODY {margin:50px 0 0 200px; display:block; width:300px;  } 
.onner, .onner a {color: #333; font-size:14pt; font-weight:bold; font-family: Arial, Trebuchet MS, Georgia, 'Times New Roman', Times, serif; line-height:180%; } 
.spoiler {border:0px solid #ddd; padding:3px;} 
.spoiler .inner {border:0px solid #eee; padding:3px;margin:3px;}
</style> 
<script type="text/javascript"> 
function showSpoiler(obj) {var inner = obj.parentNode.getElementsByTagName("div")[0]; if (inner.style.display == "none") inner.style.display = ""; else inner.style.display = "none"; } 
</script> 
 </HEAD> 
 <BODY> 
 <div class="spoiler">
 <span class="onner" onclick="showSpoiler(this);"><H2>Показать/Скрыть</H2></span>
 <div class="inner" style="display:none;">Скрытый текст</div>
 </div>
 </BODY> 
 </HTML>

SpiritDark 11.04.2012 15:48

Если один <div> видимый и один <div> скрытый! Надо что бы при нажатие на кнопку "видимый <div> скрылся" а " невидимый <div> открылся"

T-sh 11.04.2012 15:50

<script>
show.visible = '2';
show.hidden = '3';
 function show(){
 	show.hidden = show.visible;
 	show.visible = (show.visible === '2')?'3':'2';
	document.getElementById(show.visible).style.display = 'block';
	document.getElementById(show.hidden).style.display = 'none';
}
 </script>

 <a href="#" onClick="show();">показать/скрыть</a>
 <div id="2" style="display:block">
 Скрытый текст1
 </div>

 <div id="3" style="display:none">
 Скрытый текст2
 </div>

SpiritDark 11.04.2012 15:56

Спасибо большое

xreider 22.07.2017 21:09

Здравствуйте. Можете сделать такой же Ваш код как здесь, но только с запоминанием куки????

Спасибо заранее!!!

рони 22.07.2017 21:37

xreider,
Открывашка 253 с запоминаем открытой вкладки

Маэстро 22.07.2017 21:42

Цитата:

Сообщение от SpiritDark (Сообщение 168278)
style="display:yes"

- что-то тут не так ;) смотрите значения display http://htmlbook.ru/css/display
В общем случае не всегда для отображения элемента надо ставить display=block. Часто бывает display=inline-block и другие.

Вообще если речь идет только о двух таких элементах на странице, то в onclick передавать параметр не обязательно. "Зашейте" его прямо в код функции p1():
document.getElementById('2').style.display='block';
document.getElementById('3').style.display='none';
а в p2() наоборот


Часовой пояс GMT +3, время: 17:23.