Witam,

mam problem bo chcę zrobić coś takiego aby po kliknięciu na link/guzik pokazywała mi się ukryta tabela.

Mój kod wygląda następująco:

[PHP] pobierz, plaintext 
    <script type="text/javascript">  
    $(document).ready(function() {
      $('.slickbox').hide();
      $('#slick-show').click(function() {
        $('.slickbox').show();
        return false;
      });
      $('#slick-hide').click(function() {
        $('.slickbox').hide();
        return false;
      });
      $('.slick-toggle').click(function() {
        $('.slickbox').toggle();
        return false;
      });
    });
    </script>  
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="specyfikacja_list">
<table  class="table table-hover">
	<thead>
	    <tr>
		    <th>ID</th>
		    <th>Kod</th>
		    <th>Nazwa</th>
		    <th>Imię</th>
		    <th>Nazwisko</th>
		    <th>Firma</th>
		    <th>Flota</th>
		    <th>Status</th>
		    <th>Więcej</th>
	    </tr>
	    <tr>
	</thead>
	<tbody>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>qaa</td>
		<td>aaaaa</td>
		<td>Jaaaamroz</td>
		<td>aHost</td>
		<td>OPEK</td>
		<td> <span class="label label-info">A</span> </td>
		<td><a href="#" class="slick-toggle">Kliknij</a></td>
	</tr>
	<tr  >
		<td class="slickbox" colspan="10">
			<p><b>Państwo :</b> USA</p>
			<p><b>Miasto :</b> New York</p>
			<p><b>Państwo :</b> USA</p>
			<p><b>Ul. :</b> Bay Pkw 22123 / 12	</p>
			<p><b>Zip :</b> 21-211</p>
			<p><b>Tel :</b> 8112345678</p>
			<p><b>Fax :</b> 8112345678</p>
			<p><b>Kom :</b> 8112345678</p>
			<p><b>www :</b> wp.pl</p>
			<p><b>Email :</b> sasa@da.pl</p>
			<p><b>Info :</b> użytkownicy, szukający tego co Ty, oglądali</p>
		</td>	
	</tr>
	</tbody>
	<tr>
		<td>2</td>
		<td>2</td>
		<td>zaqos</td>
		<td>Anna</td>
		<td>Martyniak</td>
		<td>Local org nylonix</td>
		<td>DHL</td>
		<td><span class="label label-important">B</span></td>
		<td><a href="#" class="slick-toggle">Kliknij</a></td>
	</tr>
	<tr>
		<td class="slickbox" colspan="10">
			<p><b>Państwo :</b> Polska</p>
			<p><b>Miasto :</b> Lublin</p>
			<p><b>Państwo :</b> Polska</p>
			<p><b>Ul. :</b> Leśna 13 </p>
			<p><b>Zip :</b> 21-211</p>
			<p><b>Tel :</b> 8112345678</p>
			<p><b>Fax :</b> 8112345678</p>
			<p><b>Kom :</b> 8112345678</p>
			<p><b>www :</b> wp.pl</p>
			<p><b>Email :</b> sasa@da.pl</p>
			<p><b>Info :</b> użytkownicy, szukający tego co Ty, oglądali</p>
		</td>	
	</tr>
	</tbody>
 
</table>
 
</div>
[HTML] pobierz, plaintext 

Po kliknięciu na link ( linia 27,54) pojawiają mi się ukryte tabele ale wszystkie na raz co jest złe ale logiczne.

Sytuacja wygląda tak, że każdy <tr> jest generowany automatycznie i teraz są dwa ale w przyszłości będą setki.

Proszę o pomoc jak to rozwiązać bo brak mi doświadczenia w takich sytuacjach.

Jeśli skrypt ma wyglądać w ten sposób że dla każdej osoby jest osobna tabela to dla każdej osoby musi być osobny przełącznik, a nie tak jak teraz - jeden przełącznik dla całej listy.

Najlepiej zrobić to dodając dodatkową kolumnę z przyciskiem "przełącz" .

Przycisk powinien mieć wygenerowane id, najlepiej skonstruowane ze stringu i id osoby, np: "toggle_" i n; co dałoby np dla osoby o id 5 link w postaci:
"<a href="$" id="toggle_5" class="slick-toggle">.

Natomiast komorka tabeli <td class="slickbox"></td> powinna mieć odpowiednio nadane id, np:
<td class="slickbox" id="slickbox_5">

Wtedy można w JS zrobić coś takiego:

[JAVASCRIPT] pobierz, plaintext 
 
$('.slick-toggle').click(function() {
 
var id = $(this).attr("id").split("_")[1];
var td_id = "#slickbox_" + id;
        $(td_id).toggle();
        return false;
      });
 
[JAVASCRIPT] pobierz, plaintext