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>
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.
