Bonjour,
j'ai un code pour un "accordéon" en Jquery mais qui ne fonctionne pas comme je le souhaite :
En fait, je souhaite pouvoir cliquer sur "Concert" et que le reste s'affiche (uniquement "1ère date" et "2ème date..." et ensuite quand je clique sur "1ère date" la description s'affiche...) je sais pas si je suis clair...
je veux une cascade...
Merci d'avance.
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
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
65
66
67
68
69
70
71
72
73
74
75
76 <!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" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>ESSAI</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery-1.2.1.pack.js"></script> <script type="text/javascript"> $(document).ready(function(){ //ne pas afficher les message cachés $(".message_cache").hide(); //affiche le message caché lors du clic $(".message_affiche").click(function(){ $(this).next(".message_cache").slideToggle(500) return false; }); //réduit tous les messages $(".reduit_tous_messages").click(function(){ $(".message_cache").slideUp(500) return false; }); //montre tous les messages $(".montre_tous_messages").click(function(){ $(".message_cache").slideDown(500) return false; }); }); </script> </head> <body> <br /><br /> <p class="collapse_buttons"> <a href="#" class="montre_tous_messages">Afficher tous les événements </a> <a href="#" class="reduit_tous_messages">Masquer tous les événements</a> </p> <br /><br /> <div class="message_list"> <div class="message_affiche"><a>Concert</a></div> <br/> <div class="message_cache"> <div class="message_affiche"><a> 1ère date </a> <div class="message_cache"><a> Nom du 1er artiste du Concert</a></div> <div class="message_cache"><a> Description cachée du 1er artiste du Concert... Description cachée du 1er artiste du Concert...</a></div> </div> <div class="message_affiche"><a> 2ème date </a> <div class="message_cache"><a> Nom du 2ème artiste du Concert</a></div> <div class="message_cache"><a> Description cachée du 2ème artiste du Concert... Description cachée du 2ème artiste du Concert...</a></div> </div> <div class="message_affiche"><a> 3ème date </a> <div class="message_cache"><a> Nom du 3ème artiste du Concert</a></div> <div class="message_cache"><a> Description cachée du 3ème artiste du Concert... Description cachée du 3ème artiste du Concert...</a></div> </div> </div> <div class="message_affiche"><a>Exposition</a></div> <br/> <div class="message_cache"><a> 1ère date </a> <div class="message_affiche"><a> Nom du 1er artiste de l'exposition</a></div> <div class="message_affiche"><a> Description cachée du 1er artiste de l'exposition... Description cachée du 1er artiste de l'exposition...</a></div> </div> <div class="message_cache"><a> 2ème date </a> <div class="message_affiche"><a> Nom du 2ème artiste de l'exposition</a></div> <div class="message_affiche"><a> Description cachée du 2ème artiste de l'exposition... Description cachée du 2ème artiste de l'exposition...</a></div> </div> <div class="message_cache"><a> 3ème date </a> <div class="message_affiche"><a> Nom du 3ème artiste de l'exposition</a></div> <div class="message_affiche"><a> Description cachée du 3ème artiste de l'exposition... Description cachée du 3ème artiste de l'exposition...</a></div> </div> </div> </body> </html>
Partager