Bonjour,

Voici mon probleme :

j'iutilise slidetoggle() de jquery pour pouvoir masquez plusieurs ligne (fille)d'un tableau au clique sur la ligne mère.

cependant quand je clique sur la ligne mère il m'affiche juste la premier ligne fille pas les autres (ses soeur) en plus la ligne qui s'affiche apparaît complétement dans une seule cellule <th>.

voici mon code

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
	   <title></title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<style type="text/css">
                </style>
	</head>
	<link rel="stylesheet" href="styleTable.css" />
	<h2>My slide</h2>
	<body>
		<br />
		<table id="tableToggle">
			<caption>Passagers du vol 377</caption>
		    <tr>
			   <th>Nom</th>
			   <th>Âge</th>
			   <th>Pays</th>
		    </tr>
			<tr>
				<td><div class="tableToggleButton">Carmen</div></td>
				<td>33 ans</td>
			   <td>Espagne</td>
			</tr>
			<tr class="toggleable">
			   <td>CarmenSOEUR_1</td>
			   <td>33 ans_1</td>
			   <td>Espagne_1</td>
		   </tr>
			<tr class="toggleable">
			   <td>CarmenSOEUR_2</td>
			   <td>33 ans_2</td>
			   <td>Espagne_2</td>
		   </tr>
 
			<tr>
				<td><div class="tableToggleButton">Michelle</div></td>
				<td>26 ans</td>
			   <td>États-Unis</td>
			</tr>
 
			<tr class="toggleable">
			   <td>MichelleSOEUR_1</td>
			   <td>26 ans_1</td>
			   <td>États-Unis_1</td>
		   </tr>
		   <tr class="toggleable">
			   <td>MichelleSOEUR_2</td>
			   <td>26 ans_2</td>
			   <td>États-Unis_2</td>
		   </tr>
 
		</table>
 
		<script type="text/javascript" src="js/jquery.js"></script>
	</body>
</html>

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
$(document).ready(function(){
	$("#tableToggle tr.toggleable" ).hide();
	$("#tableToggle .tableToggleButton" ).click(function(){
		$(this).parent().parent().next('tr').slideToggle('medium');                                    });
});
j'ai vu dans quelque part que (.nextAll().first()) et (.nextUntil()) pourrait le faire mais je ne sais pas comment le faire.
Avez vous des solution ?