Rozwijanie i zwijanie ukrytego DIV’a – Spoiler w HTML

html

1

Podstawy programowania / html dla początkujących / html poradnik / podstawy html i css / SEO

Prezentujemy gotowy kod html (do zastosowania również z użyciem PHP/CSS) służący do rozwijania/zwijania treści na stronie www.

Po kliknięciu w nadany tytuł linku, DIV z ukrytą wartością zostanie pokazany, po ponownym kliknięciu, DIV ukryje się.

KOD:

<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('WEBzona'); return false;">Pokaż ukrytą treść</a>
<div id="WEBzona" style="display:none">

Ukryta treść DIV'a

</div>

Jeśli chcemy wykonać na tych DIV’ach czynności niepowiązane ze sobą, wówczas każdy z nich musi mieć inne ID, które zmienia się w DIV i linku, w tym przypadku ID to “WEBzona”.

KOD:

...onClick="op('WEBzona');...
...<div id="WEBzona" style="display:none">...

Ukryta treść często jest stosowana w przypadku FAQ, layoutu strony oraz dla zaawansowanych (white hat) działań SEO.

Zachowaj / Udostępnij:

Dodaj komentarz

avatar