IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Accordéon en cascade


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de fazpedro
    Homme Profil pro
    Inscrit en
    Août 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 506
    Par défaut Accordéon en cascade
    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>

  2. #2
    Membre éclairé Avatar de fazpedro
    Homme Profil pro
    Inscrit en
    Août 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 506
    Par défaut
    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>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Delete en cascade
    Par defrgly57 dans le forum ASP
    Réponses: 3
    Dernier message: 12/04/2004, 12h13
  2. Delete on cascade avec SQL server
    Par fadoua dans le forum MS SQL Server
    Réponses: 3
    Dernier message: 14/01/2004, 11h02
  3. delete en cascade
    Par bruno270579 dans le forum Requêtes
    Réponses: 8
    Dernier message: 16/12/2003, 17h17
  4. suppresion en cascade + postgres
    Par bruno270579 dans le forum Requêtes
    Réponses: 3
    Dernier message: 16/12/2003, 16h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo