[jQuery] Zamykanie / otwieranie przy pomocy hide i show

[lukasamd]

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

[Labsta.com]

Użyj toggle

Kod:

$("p").toggle(function(){
  $(this).hide("fast");
},function(){
  $(this).show("slow");
});

[lukasamd]

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...

[Labsta.com]

To może tak

Kod:

$("a.przycisk").toggle(function(){
  $(this).next("p").hide("slow");
},function(){
  $(this).next("p").show("slow");
});

i

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.

[lukasamd]

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;

[Labsta.com]

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");
});

Pozmieniaj sobie tylko klasy. Ten patent z css display: none; nie jest najlepszy, bo Ci co nie mają js nie zobaczą nic. Możesz to dodać w js, wtedy będzie to sensowniejsze, a efekt podobny do $("div.nav").hide("fast");

[lukasamd]

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.

[Labsta.com]

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");
});