Javascript/CSS ефект на покажи/скрии див

[Hous]

<div onclick="this.className = this.className=='collapsedNode' ? 'expandedNode' : 'collapsedNode'" style="cursor:pointer" class="collapsedNode">Покажи
<div>
Това ще го видим след кликането
</div></div>

Като кликнете Покажи се показва текста и след това без значение дали ще кликнете на Покажи или на "Това ще го видим след..." дивът изчезва.

Може ли да се преработи така ,че като кликна някъде в текста който се показва да не се затваря (а само кат кликна на Покажи).

 

[tedo96]

Виж едно по-добро решение с jQuery:
http://web-tourist.net/forum/viewtopic.php?p=572142#572142

 

[Hous]

Искаше ми се нещо без излишен джаваскрипт - по опростен код както дадох за пример.Но ако някой др не каже идея , ще ползвам и твоя пример

 

[tedo96]

<div onclick="this.className = this.className=='collapsedNode' ? 'expandedNode' : 'collapsedNode'">Покажи
</div>
<div style="cursor:pointer;" class="collapsedNode">
Това ще го видим след кликането
</div>

 

[Hous]

ponter не-pointer то пак като си кликнеш си се сменя класа.

 

[Fakeheal]

<div onclick="if(this.innerHTML == 'Покажи') { document.getElementById('showhide').style.display = ''; this.innerHTML = 'Скрий'} else { document.getElementById('showhide').style.display = 'none'; this.innerHTML = 'Покажи' }" id='button'>Покажи</div>
<div id='showhide' style='display:none;'>
Това ще го видим след кликането
</div>

 

[emcuemnecu]

Така работи ли ?

 

[tedo96]

Така работи ли ?

Не знам, но само си тровите живота с това JS... jQuery му е майката!

 

[Fakeheal]

Така работи ли ?

Бачка не, ами си и свирка. Ама както каза @tedo96 и ще цитирам създателите на библиотеката:

jQuery - WRITE LESS, DO MORE!

=====
Eто ви и още един вариант (без MooTools или jQuery или Prototype )
=====

<script type='text/javascript'>
function showhide(){ 
	 obj = document.getElementById('showhide'); 
	 button = document.getElementById('button');
	if (obj.style.display == "none"){
		button.innerHTML = "Скрий"
		obj.style.display = ""; 
	} else { 
		button.innerHTML = "Покажи"
		obj.style.display = "none"; 
	} 
} 
</script>
<div onclick="showhide('node')" id='button'>Покажи</div>
<div id='showhide' style='display: none;'>
Това ще го видим след кликането
</div>