WEBzona

BONUS: Kupon 1200 PLN na kampanie Google Ads

Rozwijanie i zwijanie ukrytego DIV’a – Spoiler w HTML

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:

Tytuł spojlera
Witaj 🙂





Artykuł WEBzona
Podziel się wiedzą – dodaj swój artykuł na blogu WEBzona!
5/5 - (1 vote)
Udostępnij w swojej sieci!

1 Comments

  1. Szkoda że Wodpress nie ma wbudowanej opcji aby robić coś takiego z klawisza. Że tekst jest po naciśnięciu wyświetlany dalej. A tak jest zasłonięty, zwinięty pod klawiszem. Wiele rzeczy brakuje w wordpress takich przydatnych do użycia.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *


The reCAPTCHA verification period has expired. Please reload the page.

Shopping cart close