Mam taki skrypt:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
 
    // when "More" or "Less" (class moreOptionsLink) was clicked.
    $(".toggle" ).click(function(){
 
        var txt = $(this).text();
 
        if(txt=='⇓'){
            /*
             * change the text to "Less"
             * change the background color to "red"
             * which means it shows all the options
             */
            $(this).text('⇑');
            $(this).css("background-color","red");
        }
 
        else{
            /*
             * change the text to "More"
             * change the background color to "green"
             * which means it hides other options
             */
            $(this).text('⇓');
            $(this).css("background-color","green");
        }
 
        /*
         * to animate the container of other options
         * we use jQuery "next" to select the "moreOptions" of the current row
         */
        $(".contact").slideToggle(200);
 
        // so that it won't refresh the page
        return false;
    });
});
[JAVASCRIPT] pobierz, plaintext 

oraz php (widok opisowy):

[PHP] pobierz, plaintext 
//tutaj początek pętli A (while)
 
//tutaj zapytanie mysql
 
//tutaj początek pętli B (while do zapytania mysql powyżej)
 
echo '<div><a href="" class="toggle">Contact</a></div>';  //przycisk-link rozsuwania diva o klasie contact
 
echo '<div class="contact">$zawartosc</div>'; //tutaj wyświetla się zawartość tabeli mysql
 
//tutaj koniec pętli B
 
//tutaj koniec pętli A
[PHP] pobierz, plaintext 

Problem w tym, że po naciśnięciu przycisku-linku rozsuwania diva rozsuwają się wszystkie wyświetlone w pętli divy z zawartością tabeli mysql.
Zmiana koloru przycisku inicjowana w skrypcie js działa zaś idywidualnie dla każdego wyświetlonego rekordu.

$(this) odnosi się do elementu który jest aktualnie kliknięty, a $(".contact") do wszystkich elementów które mają klasę 'contact'.
Wygoogluj sobie jquery siblings i powinno pomóc.

Próbuję tak:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
 
    // when "More" or "Less" (class moreOptionsLink) was clicked.
    $(".toggle" ).click(function(){
 
        var txt = $(this).text();
 
        if(txt=='⇓'){
            /*
             * change the text to "Less"
             * change the background color to "red"
             * which means it shows all the options
             */
            $(this).text('⇑');
            $(this).css("background-color","red");
        }
 
        else{
            /*
             * change the text to "More"
             * change the background color to "green"
             * which means it hides other options
             */
            $(this).text('⇓');
            $(this).css("background-color","green");
        }
 
        /*
         * to animate the container of other options
         * we use jQuery "next" to select the "moreOptions" of the current row
         */
        $(this).siblings(".contact").slideToggle(200);
 
        // so that it won't refresh the page
        return false;
    });
});
[JAVASCRIPT] pobierz, plaintext 

i nic...

Usuń tego diva w którym masz a, albo dodaj jeszcze parent()

Usunięcie div'a nic nie dało

Ciekawe jest to, że zmianę kolorów wykonuje prawidłowo i indywidualnie

Co robię nie tak?

Pokaz aktualny kod.

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
 
    // when "More" or "Less" (class moreOptionsLink) was clicked.
    $(".toggle" ).click(function(){
 
        var txt = $(this).text();
 
        if(txt=='⇓'){
            /*
             * change the text to "Less"
             * change the background color to "red"
             * which means it shows all the options
             */
            $(this).text('⇑');
            $(this).css("background-color","red");
        }
 
        else{
            /*
             * change the text to "More"
             * change the background color to "green"
             * which means it hides other options
             */
            $(this).text('⇓');
            $(this).css("background-color","green");
        }
 
        /*
         * to animate the container of other options
         * we use jQuery "next" to select the "moreOptions" of the current row
         */
        $(this).siblings(".contact").slideToggle(200);
 
        // so that it won't refresh the page
        return false;
    });
});
[JAVASCRIPT] pobierz, plaintext 

[PHP] pobierz, plaintext 
echo '<div id="main">';
 
//tutaj początek pętli A (while)
 
//tutaj zapytanie mysql
 
//tutaj początek pętli B (while do zapytania mysql powyżej)
 
echo '<a href="" class="toggle">Contact</a>';  //przycisk-link rozsuwania diva o klasie contact
 
echo '<div class="contact">$zawartosc</div>'; //tutaj wyświetla się zawartość tabeli mysql
 
//tutaj koniec pętli B
 
//tutaj koniec pętli A
echo'</div>';
[PHP] pobierz, plaintext 

Cała zawartość jest w głównym kontenerze "main"

https://jsfiddle.net/w4qpmfqh/1/

Powalczyłem i działa !!!!
Serdeczne dzięki !!!!

Mam pytanie o rozszerzenie możliwości powyższego skryptu. Mianowicie mam skrypt jquery, który zwija/rozwija
pojedyńczo, czyli jak w tym temacie, ale chciałem dołączyć przycisk, który zwija/rozwija wszystkie elementy naraz.
Sam skrypt to nie problem. Schody zaczynają się, gdy np rozwinę dwa elementy z pięciu, apotem jednym przyciskiem chcę
zwinąć/rozwinąć wszystko naraz. Efekt jest taki, że te co rozwinąłem pojedyńczo się zwijają a pozostałe nierozwinięte rozwijają.

Skrypt rozwijania pojedyńczego:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
      $(".staly:even").css("background-color", "#6B3C53");
      $(".staly:odd").css("background-color", "#B1AE98");
    $(".toggle").click(function () {
      $(".contact:even").css("background-color", "#6B3C53"); 
 
      var swapped = $(this).attr("data-swapped");
    var init = 'false';
 
    if(swapped === 'false'){
        var swapImage = $(this).attr("data-swap");
        init = true;
    }else{
        var swapImage = $(this).attr("data-src");
    }
 
    $(this).attr({
        'src': swapImage,
 
        'data-swapped': init
    });
 
        $(this).parent().parent().parent().next(".contact").slideToggle(400);
 
        return false;
    });
});
[JAVASCRIPT] pobierz, plaintext 

a poniżej rozwijania grupowego:

[JAVASCRIPT] pobierz, plaintext 
$(function()
  {
  $(".staly:even").css("background-color", "#6B3C53");
      $(".staly:odd").css("background-color", "#B1AE98");
     $(".toggle_all").click(function()
                         {
                         $(".contact:even").css("background-color", "#6B3C53");
                           var swapped = $(this).attr("data-swapped_all");
    var init = 'false';
 
    if(swapped === 'false'){
        var swapImage = $(this).attr("data-swap_all");
        init = true;
    }else{
        var swapImage = $(this).attr("data-src_all");
    }
 
    $(this).attr({
        'src': swapImage,
 
        'data-swapped_all': init
    });
         $(".contact").slideToggle(400);
 
 
        return false;
    });
    });
[JAVASCRIPT] pobierz, plaintext 

Żadnych pomysłów?