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.

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:

Tytuł spojlera
Witaj 🙂

1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdki (1 głosów. Średnia: 5,00 na 5)

Loading...

Czy podobał Ci się wpis? Jeśli tak, udostępnij go w swojej sieci!

Dodaj komentarz

avatar