Accordéon en cascade

**fazpedro** · 06/10/2011, 12h04

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 &eacute;v&eacute;nements </a> 
<a href="#" class="reduit_tous_messages">Masquer tous les &eacute;v&eacute;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>

**fazpedro** · 10/10/2011, 12h06

j'ai trouvé comment faire...

Voici le code complet :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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" lang="fr">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<script src="jquery.js" type="text/javascript"></script>
<title>PAGE DE TEST LISTE DEROULANTE</title>
<script type="text/javascript">
     $(document).ready(function(){
    $("#menus div ul ul").hide(); 		//  sous-menus cachés
    $("#menus div ul ul ul").hide(); 	//  sous-sous-menus cachés
    $("#menus div ul li a").click(function(){	//  affiche les sous menus et masque les autres
        $(this).parent().parent().children("li").find("ul.montre").slideToggle("").removeClass("montre").addClass("matched");
        $(this).parent().children("ul").not(".matched").addClass("montre").slideToggle("slow");
        $(this).parent().parent().children("li").find("ul.matched").removeClass("matched");
        if ($(this).attr("href") == "#") {
        return false;
        }
    });
		//réduit TOUS les niveaux
		$(".reduit_tous_messages").click(function(){
		$("#menus div ul ul").slideUp(500)
		return false;	});
		//montre TOUS les niveaux
		$(".montre_tous_messages").click(function(){
		$("#menus div ul ul").slideDown(500)
		return false;		});
    });
</script>
</head>
<body>
<br /><br />
<p><a href="#" class="montre_tous_messages">Afficher tous les &eacute;v&eacute;nements </a>
<br /><a href="#" class="reduit_tous_messages">Masquer tous les &eacute;v&eacute;nements</a></p>
<br /><br />
<div id="menus">
	<div id="Premier niveau">
		<h2>TEST SUR LISTES DEROULANTES</h2>
			<ul>
				<li><a href="#">PREMIER TITRE</a>
					<ul>
						<li><a href="#">PREMIER NIVEAU dans le PREMIER TITRE</a>
						<ul>
							<li><a href="#">un texte a voir ici....</a></li>
 
								<li><a href="#">SOUS NIVEAU DU PREMIER dans le PREMIER TITRE...</a>
									<ul>
									<li><a href="#">un texte a voir ici....</a></li>
									<li><a href="#">un autre texte a voir ici....</a></li>
									<li><a href="#">un troiseme texte a voir ici....</a></li>
									</ul>
								</li>
 
							<li><a href="#">un troiseme texte a voir ici....</a></li>
						</ul>
						</li>
						<li><a href="#">DEUXIEME NIVEAU dans le PREMIER TITRE</a>
						<ul>
							<li><a href="#">un texte a voir ici....</a></li>
							<li><a href="#">un autre texte a voir ici....</a></li>
							<li><a href="#">un troiseme texte a voir ici....</a></li>
						</ul>
						</li>
						<li><a href="#">TROISIEME NIVEAU dans le PREMIER TITRE</a>
						<ul>
							<li><a href="#">un texte a voir ici....</a></li>
							<li><a href="#">un autre texte a voir ici....</a></li>
							<li><a href="#">un troiseme texte a voir ici....</a></li>
						</ul>
						</li>
					</ul>
				</li>
 
				<li><a href="#">DEUXIEME TITRE</a>
					<ul>
						<li><a href="#">PREMIER NIVEAU dans le DEUXIEME TITRE</a>
						<ul>
							<li><a href="#">un texte a voir ici....</a></li>
							<li><a href="#">un autre texte a voir ici....</a></li>
							<li><a href="#">un troiseme texte a voir ici....</a></li>
						</ul>
						</li>
						<li><a href="#">DEUXIEME NIVEAU dans le DEUXIEME TITRE</a>
						<ul>
							<li><a href="#">un texte a voir ici....</a></li>
							<li><a href="#">un autre texte a voir ici....</a></li>
							<li><a href="#">un troiseme texte a voir ici....</a></li>
						</ul>
						</li>
						<li><a href="#">TROISIEME NIVEAU dans le PREMIER TITRE</a>
						<ul>
							<li><a href="#">un texte a voir ici....</a></li>
							<li><a href="#">un autre texte a voir ici....</a></li>
							<li><a href="#">un troiseme texte a voir ici....</a></li>
						</ul>
						</li>						
					</ul>
				</li>
 
			</ul>
    </div> 
</div>
</body>
</html>

Accordéon en cascade

jQuery

Vue hybride

Discussions similaires

Partager

Partager