Discussion :

[olivorel]

Bonjour,
Débutant en jquery, j'ai un soucis avec mon code. En effet je voudrais qu'en cliquant sur un bouton, la liste correspondant à ce bouton puisse s'afficher et non pas toutes les listes en même temps.

Il me semble qu'il faut que j'utilise la methode find() mais je ne vois pas comment l'implémenter...

html:

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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<article> 	
	<div id="numero_aerien">
	<br />
			<p>Cannon man</p>
			<p>Want to discover the cannon man !! Strong sensations guaranteed!</p>
			<button>See list for other numbers</button>
			<ul class="liste">
 
			<li>Flying Trapeze</li>
			<li>Rope-dancer</li>
			<li>Unicycle</li>
			</ul>
	</div>	
	</article>
 
	<article>
		<div id="animaux"><p>
		<br />
		<p> Discover what our animals can do! Never seen!<p>
		<button>See list for our animals</button>
			<ul class="liste">
				<li>The ostrich ballet</li>
				<li>Horses dance rock and roll</li>
				<li>The Lions Concert</li>
				<li>The sea lions make their show</li>
				</ul>
		</div>
	</article>
					<article>
				<div id="acrobatie_equilibre">
				<br />
				<p> Breathtaking acrobatics! Ready for an apnea session?<p>
				<button>Overview of some equilibrium numbers</button>
				<ul class="liste">
					<li>Wire </li> 
					<li>Balance Bike</li>
					<li>Human Pyramid</li>
					<li>Scales</li>
					</ul>
				</div>
				</article>

css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.liste{
  display:none;
}

jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('button').click(function(){
  $('.liste').slideToggle();
});

Merci pour votre aide future!

[SpaceFrog]

Une possibilité est de remonter au parent commun pour rechercher l'ul enfant :
https://jsfiddle.net/abxvprw5/

[olivorel]

Merci beaucoup pour ta réponse cela fonctionne sur ton lien (et c'est exactement ce que je souhaite avoir,) en revanche sur le mien, une fois que je clique sur n'importe quel bouton, les listes se déroulent toujours en même temps... à mon avis il doit y avoir un souci au niveau des div comme j'en ai ailleurs sur ma page, cela pourrait il venir de là? Dois je renommer ces div id par par exemple "numero_aerien", "numero_animaux" et "numero_acrobatie" afin que l'élément pointe sur le div avec lequel il y a le mot "numéro_"?

Edit: je pense avoir trouvé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$( function(){
$('button').on('click',function(){
  $(this).parents('div:first').find('.liste').slideToggle();
});
})

[SpaceFrog]

Je dirais que ça sent le html mal formé ...

[olivorel]

Je pense aussi...
Voici mes codes:

code html:

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
58
59
60
61
62
63
64
	<section class="bloc_page"> 
 
				<article class="article"> 	
					<div class="numero_aerien">
 
						<p>Want to discover the cannon man !! Strong sensations guaranteed!</p>
						<button class="button">See list for other numbers</button>
							<ul class="liste">
								<li>Flying Trapeze</li>
								<li>Rope-dancer</li>
								<li>Unicycle</li>
							</ul>
					</div>	
				</article>
				<aside class="aside"> 
					<div class="element">
          <br /> 
						<p><img src="http://i.imgur.com/BJBldA6.jpg" alt="" style="width:250px" /></p>
						<span>Air numbers</span>  
					</div>	
				</aside> 	
<br />         
				<article class="article">
					<div class="numero_animaux"><p>
					<p> Discover what our animals can do! Never seen!<p>
						<button class="button">See list for our animals</button>
							<ul class="liste">
								<li>The ostrich ballet</li>
								<li>Horses dance rock and roll</li>
								<li>The Lions Concert</li>
								<li>The sea lions make their show</li>
							</ul>
					</div>
				</article>
				<aside class="aside">
					<div class="element">
          <br />
						<p><img src="http://i.imgur.com/6nI3LAA.jpg" alt="" style="width:250px"/></p>
						<span>Our animals</span>
					</div>
				</aside> 
				<article class="article">
					<div class="numero_acrobatie">
						<p> Breathtaking acrobatics! Ready for an apnea session?<p>
							<button class="button">Overview of some equilibrium numbers</button>
								<ul class="liste">
									<li>Wire </li> 
									<li>Balance Bike</li>
									<li>Human Pyramid</li>
									<li>Scales</li>
								</ul>
					</div>
				</article>
				<aside class="aside">
					<div class="element">
          <br />
						<p><img src="http://i.imgur.com/DtCqSqf.jpg" alt="" style="width:250px"/></p>
						<span>Balance and acrobatics</span>
					</div>
				</aside>
 
 
 
			</section>

code css:

Code css :

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
.button {
	border:none;
	padding:6px 6px 6px 6px;
	border-radius:8px;
	background:#A1190D;
	font:bold 13px Arial;
	color:#fff;
  cursor:pointer;
}
.bloc_page img
{
	border: 1px solid #760001;
    border-radius: 5px;
	display: block;
 
}
.bloc_page div {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0;
}

code jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script type="text/javascript">
$(document).ready(function()
{$('button').on('click',function()
{
 $(this).parents('div').find('.liste').slideToggle();
});
})};
</script>

comment se fait il que quand j'écris "$(document).ready(function()..." cela ne fonctionne pas alors que quand je le remplace par "$(function()" cela fonctionne ?
Pourquoi lorsque je travaille en "local" cela fonctionne et non pas sur jsfiddle alors que j'ai bien annoncé la librairie jquery?