[JavaScript]hide/show div w jquery Opcje

[olo707]

Witam
Mam taki problem. Z bazy danych pobierane są dane i wyświetlane na stronie, w tym przypadku np.Jan Kowalski a pod imieniem i nazwiskiem po kliknięciu w imię i nazwisko pojawiają się bądź znikają pod imieniem i nazwiskiem (toggle w jquery) pozostałe dane np email, telefon, data urodzenia przypisane do konkretnej osoby.

Kod

echo'<h3><a href ="#" class=\'person\'>'.$name.' '.$surname.'</a></h3><br />';
echo"<div class='date' style = 'display:none;'>$email<br />$phone<br />$birthday</div>";

a kod jquery wygląda tak

Kod

$('.person').click(function(){
    $('.date').toggle();
});

Problem polega na tym że w tym przypadku po kliknięciu w imie/nazwisko konkretnej osoby znikają/pojawiają sie dane wszystkich innych osób. Jak przerobić kod jquery tak by po kliknięciu konkretnej osoby pojawiały się/ znikały tylko dane tej osoby.

[olo707]

nie są puste po pierwsze, a po drugie elementy są jedne pod drugim (email, tel i data urodzenia są ustawione jako display:none) np
jan kowalski
email
tel
data urodzenia

jan nowak
email
tel
data urodzenia

czyli klikając na jan kowalski dane tej osoby się chowają a imie i nazwisko kolejnej osoby automatycznie się podnosi do góry i to wizualnie widać ale w miejscu gdzie te dane (email, tel i data urodzenia) miałyby być widoczne jest białe tło (nic nie ma)