Salut tout le monde,
J'ai deux fichiers :
faq.php :
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 <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 :
J'aimerais donc que lorsque l'utilisateur clique sur bonjour ou bonjour2 le <p> juste en dessous s'affiche. S'il reclique, il disparait...
Code : 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 $(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('+'); } }); });
Malheureusement rien ne s'affiche quand je clique sur bonjour ou bonjour2.
Avez vous une idée ? Merci d'avance![]()
Partager