[Jquery][JS] Poprawa kodu - zwijanie i odwijanie Opcje

[yozer2308]

[HTML] pobierz, plaintext 
<font face="Verdana" size="3">
<b>09 styczeń 2012 - Szkolenie 1 test</b>
</font>
 
<font face="Verdana" size="2">
<p id="szk1">
Test to działa!
</p></font>
<font face="Verdana" size="1">
<p id="show1" align="right" style="color:  red; cursor: pointer;">więcej...
</p></font>
 
<font face="Verdana" size="3">
<b>09 styczeń 2012 - Szkolenie 2 test</b>
</font>
 
<font face="Verdana" size="2">
<p id="szk2">
Test to działa! Hura!
</p></font>
<font face="Verdana" size="1">
<p id="show2" align="right" style="color:  red; cursor: pointer;">więcej...
</p></font>
[HTML] pobierz, plaintext 

I taki kod jquery:

[HTML] pobierz, plaintext 
$(document).ready(function(){
 
$('#szk1').css('display','none');
    $('#show1').click(function(){
        if ($("#szk1").is(":hidden")) {
 
            $("#szk1").slideDown("slow");
            $('#show1').text('schowaj...');
 
            }
        else{
 
        $("#szk1").slideUp("slow");
        $('#show1').text('więcej...');
 
        }
});
 
$('#szk2').css('display','none');
    $('#show2').click(function(){
        if ($("#szk2").is(":hidden")) {
            $("#szk2").slideDown("slow");
            $('#show2').text('schowaj...');
            }
        else{
        $("#szk2").slideUp("slow");
        $('#show2').text('więcej...');
        }
 
      });
 
});
[HTML] pobierz, plaintext 

W przypadku dwóch rozwijających się elementów, jeszcze ujdzie chociaż i tak brzydko to wygląda.
A ja nie mam pomysłu jak to zrobić tak "elegencko" (tzn. żebym do każdego rozwijanego elementu nie musiał dodawać znowu tych kilku linijek).

Ten post edytował yozer2308 4.01.2012, 09:39:20

[kaem]

Zamiast id nadaj tym elementom takie same klasy, np: class="szk" i class="show". Wrzuć każdy powtarzający się kawałek htmla do diva. I teraz jak klikniesz w element $('.szk'), szukasz elementu o klasie show znadjującego się w tym samym divie i sprawdzasz czy jest ukryty. Pomogą Ci w tym, np. takie metody JQuery: parent(), find(), children(), eq(), hth-child(). Sposobów w sumie na rozwiązanie tego problemu jest jest kilka. Przejrzyj doc jQuery bo tam jest b. ładnie wszystko opisane.