Jquery qui ne fonctionne pas ?
Salut tout le monde,
J'ai deux fichiers :
faq.php :
Code:
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
| <html>
<head>
<title>FAQ</title>
<script src="effet.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
#paragraphe{list-style:none;font-family:arial;font-size:18px;margin:0 auto;padding:0;width:500px;}
#paragraphe li{border-bottom:4px solid grey;position:relative;cursor:pointer;}
#paragraphe h2{font-family:arial;font-size:22px;}
#paragraphe p{font-family:arial;font-size:16px;display:none;}
#paragraphe span{position:absolute;right:5px;top:0;}
</style>
</head>
<body>
<ul id="paragraphe">
<li>
<h2>BONJOUR</h2>
<span>+</span>
<p> Ici notre contenu super pratique, avec effet jquery </p>
</li>
<li>
<h2>BONJOUR2</h2>
<span>+</span>
<p> Ici notre contenu super pratique, avec effet jquery </p>
</li>
</ul>
</body>
</html> |
Et effet.js :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| $(document).ready(function () {
$('#paragraphe li').click(function(){
var text = $(this).children('p');
if (text.is(':hidden')){
text.slideDown('500');
$(this).children('span').html('-');
}
else {
text.slideUp('300');
$(this).children('span').html('+');
}
});
}); |
J'aimerais donc que lorsque l'utilisateur clique sur bonjour ou bonjour2 le <p> juste en dessous s'affiche. S'il reclique, il disparait...
Malheureusement rien ne s'affiche quand je clique sur bonjour ou bonjour2.
Avez vous une idée ? Merci d'avance :)
