30.08.2012 o 23:08

[HTML][JS] Rozwijanie i zwijanie ukrytego DIV'a

Zademonstruję wam gotowy kod służący do rozwijania, zwijania, rozsuwania, wysuwania czy jak, kto woli nazywać tą czynność w kodzie. Po kliknięciu w dany link DIV z ukrytą wartością zostanie pokazany, po ponownym kliknięciu na dany link, DIV się ukryje.

Kod do pliku html:
<script>
function op(obj) {
x=document.getElementById(obj);
if(x.style.display == "none") x.style.display = "block";
else x.style.display = "none"
}
</script>

<a href="/" onClick="op('poka'); return false;">Pokaż</a>
<div id="poka" style="display:none">
Ukryta treść DIV'a
</div>

Jeśli chcemy wykonać więcej takich ukrytych DIV'ów, to każdy z nich musi mieć inne id, które zmienia się w DIV i linku, w tym przypadku id to "poka":
...onClick="op('poka');...
...<div id="poka" style="display:none">...

Można także obsadzić zawartość klamerek <script> w pliku .js.

Zapraszam również do obejrzenia drugiej wersji Płynne animacyjne rozwijanie DIV'a - Rozwijanie i zwijanie ukrytego DIV'a v2.
Komentarze
Korzem (08.12.2013 o 20:58)
Całkiem przydatny skrypt ;)
© 2010 - 2018 - Karol Drąg
Wszelkie prawa zastrzeżone
Polityka plików cookies