+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [jQuery] Zamykanie / otwieranie przy pomocy hide i show (/thread-jquery-zamykanie-otwieranie-przy-pomocy-hide-i-show)
[jQuery] Zamykanie / otwieranie przy pomocy hide i show - lukasamd - 11-08-2009
Witam,
chciałbym zrobić sobie, aby nad akapitem lub divem była belka z napisem. Po kliknięciu na nią div / akapit ukrywa się. Po następnym pokazuje itd.
Wiem że mogę użyć hide i show z jquery, np. tak jak tu:
Kod:
<a href="index.php#" onclick='$("p.znikanie").hide("fast")'>ZNIKNIJ</a><br>
<a href="index.php#" onclick='$("p.znikanie").show("slow")'>POKAZ</a>
<br /><br />
<p class="znikanie">
To jest testowy teskt, który może sobie zniknąć!<br>
To jest testowy teskt, który może sobie zniknąć!
</p>ALE mam problem
Jak widać, wiem jak to zrobić na 2 przyciskach... jak to zrobić tak, aby 1 przycisk "wiedział", że dany akapit / div jest w danej chwili zwinięty / rozwinięty?
Na js nie znam się kompletnie, łopatologiczne wyjaśnienie co-i-jak będzie więc bardzo na miejscu
RE: [jQuery] Zamykanie / otwieranie przy pomocy hide i show - Labsta.com - 11-08-2009
Użyj toggle
Kod:
$("p").toggle(function(){
$(this).hide("fast");
},function(){
$(this).show("slow");
});RE: [jQuery] Zamykanie / otwieranie przy pomocy hide i show - lukasamd - 11-08-2009
No i teraz mam przykładowo tak:
Kod:
<script>
$(document).ready(function(){
$("button").click(function () {
$("p").toggle();
});
$("p").toggle(function(){
$(this).hide("slow");
},function(){
$(this).show("slow");
});
});
</script>
<button>Przycisk</button>
<p>Testowy tekst teskt teskt teskt</p>Ale co gdy chcę dać 2 takie same elementy na stronę, które będą od siebie niezależne? Kopiowanie chyba nie ma sensu...
RE: [jQuery] Zamykanie / otwieranie przy pomocy hide i show - Labsta.com - 11-08-2009
To może tak
Kod:
$("a.przycisk").toggle(function(){
$(this).next("p").hide("slow");
},function(){
$(this).next("p").show("slow");
});Kod:
<a href="#" class="przycisk">klik</a>
<p>
cos tam
</p>
<a href="#" class="przycisk">klik</a>
<p>
cos tam
</p>
<a href="#" class="przycisk">klik</a>
<p>
cos tam
</p>Pisze z glowy, więc mogłem gdzieś się pomyklić, ale raczej jest dobrze.
RE: [jQuery] Zamykanie / otwieranie przy pomocy hide i show - lukasamd - 13-08-2009
Wszystko mi obecnie działa jak chciałem, ale mam jeszcze jedno pytanie.
Jak zrobić, aby dane bloki na wstępie były zamknięte?
Dodałem sobie do funkcji ready kod:
Kod:
$("div.nav").hide("fast");ale nieco dziwnie to wygląda: gdy sie ładuje to są otwarte, a potem się zamykają
PS: Jednak mam mały problem - efekt występuje po DRUGIM naciśnięciu na linka... nie powinien czasem po pierwszym?
PS2: Ten problem to wywołany chyba przez moją zmianę - najpierw zwija już zwinięte a potem dopiero rozwija
EDIT:
Już sobie poradziłem, wystarczyło dodać do css display: none;
RE: [jQuery] Zamykanie / otwieranie przy pomocy hide i show - Labsta.com - 13-08-2009
No to może odwrotnie
Kod:
$("div.nav").hide("fast");
$("a.przycisk").toggle(function(){
$(this).next("p").show("slow");
},function(){
$(this).next("p").hide("slow");
});RE: [jQuery] Zamykanie / otwieranie przy pomocy hide i show - lukasamd - 13-08-2009
No tak, rzeczywiście jak ktoś miałby wyłączone js to nie pokazałoby zupełnie nic.
A nie da się tego zrobić przy innym zdarzeniu? W wypadku ready zamykają się po załadowaniu. Próbowałem load (document oraz window), ale wtedy nie działa lub chowa tak samo jak w wypadku ready.
RE: [jQuery] Zamykanie / otwieranie przy pomocy hide i show - Labsta.com - 13-08-2009
A to co napisałem powyżej nie działa (gdy podstawisz swoje klasy)?
Analogiczne zrobiłem to w tym tutku: http://websta.pl/tutoriale/jquery-wysuwany-boczny-panel-menu
to moż tak, trochę inaczej:
Kod:
$("p").css("display", "none");
$("a.przycisk").toggle(function(){
$(this).next("p").show("slow");
},function(){
$(this).next("p").hide("slow");
});