Rozwijanie i zwijanie ukrytego DIV’a – Spoiler w HTML

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.

Niezależna modyfikacja dowolnej treści:

Wpisz w treści strony:

<div class="WEBzona">
<p>Dowolny tekst</p>
</div>

Wpisz w kodzie CSS:

.WEBzona {
display: ... ;
}

Pomocna wtyczka do WordPressa:

Z opcją zwijania i rozwijania tekstu dobrze radzi sobie wtyczka Shortcodes Ultimate.

Spojler jest bardzo rozbudowany, a dodatkowo można dodać unikatową kotwicę, aby dotrzeć bezpośrednio do niego – podając przed nazwą krzyżyk. Przykładowo: wpisujesz “Witaj” a później używasz url-a w ten sposób: http://example.com/url-strony#Witaj. Wtedy spojler zostanie otwarty, a przeglądarka przewinie stronę do miejsca w którym się on znajduje.

Przykład: