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>
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">...
...<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.
29.11.2012 o 23:09
14.12.2017 o 9:20
Komentarze
