Discussion :

[Oniii]

Bonjour à tous,

J'ai eu beau essayer toute la journée je n'arrive pas à faire en sorte de fermer la div ouverte en cliquant sur une autre à ouvrir.

Mon code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<h2><a href="#" class="listeTitre"> TITRE </a></h2>
<div class="listeDescription"> CONTENU </div>
 
<h2><a href="#" class="listeTitre"> TITRE </a></h2>
<div class="listeDescription"> CONTENU </div>
 
<h2><a href="#" class="listeTitre"> TITRE </a></h2>
<div class="listeDescription"> CONTENU </div>

Merci et très bonne fin d'après midi.

[Bovino]

On peut voir ce que tu as essayé de faire ?

[SpaceFrog]

.not(this) ...

[Oniii]

http://next-com.fr/sitedesite/

Première catégorie à gauche ensuite en faite je voudrais que quand on ouvre la première ligne et que l'on souhaite ouvrir la deuxième la première ce ferme au clique de la deuxième.

J’espère que je suis assez compréhensif ^^

J'ai essayer le toogle slideup et slidown mais toujours aucun résultat je suis pas hyper bon en jQuery ^^

[Bovino]

Perso, j'ai pas trop envie d'aller sur ton site pour regarder la source. Donc si tu pouvais poster le code, ce serait plus simple !

[Oniii]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script type="text/javascript">
   $(document).ready(function(){
      $('.listeTitre').click(function(){
         $('.listeDescription').slideUp('fast');
         $(this).next('.listeDescription').slideDown('fast');
      });
   });
</script>

[Bovino]

Ton script n'est pas correct.
$('.listeTitre') (et donc $(this)) correspond à la balise <a> qui n'a donc pas de .next('.listeDescription').

[Oniii]

donc $(this) je dois le remplacer par quoi pour un équivalent de <p> ou <div>

Merci je commence à comprendre mon erreur

[Bovino]

Tu ne dois pas remplacer $(this), tu dois juste remonter d'un cran avant d'invoquer .next() car la div que tu recherches correspond au .next() de la balise <h2>.
Regarde du côté de .parent().

[Oniii]

Je comprend vraiment pas je suis désolé .. peux être un exemple avec mon script complet si ce n'est pas trop demander ?

[danielhagnoul]

Bonsoir

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
/*
 * Pas trivial !
 * 
 * On ouvre les deux premières divisions portant la
 * classe "listeDescription" qui suive le tag "a.listeTitre" 
 * qui a été cliqué.
 * 
 * Si on ne doit ouvrir que la seconde division, il faut remplacer :
 * if ( this == jObjs.eq( 0 ).get( 0 ) || this == jObjs.eq( 1 ).get( 0 ) ){
 * par :
 * if ( this == jObjs.eq( 1 ).get( 0 ) ){
 */
$('.listeTitre').click( function(){
	var jObjsDescription = $( ".listeDescription" ),
		jObjs = $( this ).parent().nextAll( ".listeDescription" );
 
	jObjsDescription.slideUp( 800, function(){
		if ( this == jObjs.eq( 0 ).get( 0 ) || this == jObjs.eq( 1 ).get( 0 ) ){
			$( this ).slideDown( 800 );
		}
	});
});

[Oniii]

Merci beaucoup pour ton aide !

Maintenant le problèmes c'est que rien ne ce passe quand je clique sur une de mes divisions a.listeTitre.

Voici mon code .

jQuery

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 $('.listeTitre').click( function(){
                var jObjsDescription = $( ".listeDescription" ),
                jObjs = $( this ).parent().nextAll( ".listeDescription" );
 
                jObjsDescription.slideUp( 800, function(){
                    if ( this == jObjs.eq( 0 ).get( 0 ) || this == jObjs.eq( 1 ).get( 0 ) ){
                        $( this ).slideDown( 800 );
                    }
                });
            });

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<h2><a href="#" class="listeTitre">CONTENUE</a></h2>
 
<div class="listeDescription">CONTENUE</div>
 
<h2> <a href="#" class="listeTitre ">CONTENUE</a></h2>
 
<div class="listeDescription">CONTENUE</div> 
 
<h2><a href="#" class="listeTitre ">CONTENUE</a></h2>
 
<div class="listeDescription">CONTENUE</div>

CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
.listeDescription {
    background-color: rgba(255, 255, 255, 1);
    width: 605px;
    height: auto;
    padding: 10px 10px 10px 10px;
    display: none;
    margin-bottom: 40px;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid #cccccc;
}

Merci encore ! bonne journée

[danielhagnoul]

Je ne comprends pas, j'ai testé avant de donner la solution et elle fonctionne !

Ma page de test :

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="fr" manifest="http://danielhagnoul.developpez.com/pageTest.mf">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
		article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
		.table1 { border-collapse: separate; border-spacing: 3rem; /*empty-cells: hide;*/ caption-side: top; }
		.ligne { display: table-row; }
		.caption { display: table-caption; text-align: center; }
		.table1 .ligne { min-height: 30rem; }
		.table1 article { width: 40rem; vertical-align: top; }
 
		/* TEST */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>Titre 2</h2>
		</hgroup>
	</header>
	<section class="conteneur">
		<section class="table1">
			<section class="ligne">
				<article>
 
<div id="global">
    <div id="content_validation" style="display: block;">
        <h1>VOTRE PROJET WEB AVEC <strong style="color:#06336a">NEXTCOM</strong> <strong style="color:#333; font-size: 10px; font-style: italic;">(Cliquez sur les questions dont vous souhaitez les réponses)</strong></h1>
        <div class="line"></div>
 
        <h2 class="next"><a class="listeTitre " href="#"><img src="">Comment se déroule la création de mon site internet avec Nextcom ?</a></h2>
        <div class="bloc_blanc listeDescription" style=""></div>
        <div class="listeDescription" style="">Lors d’un premier entretien autour d’un café ou par téléphone, notre équipe discutera avec vous pour connaître précisément votre entreprise et vos attentes afin d’établir une première ébauche de votre site internet. Bien entendu, si vous avez des idées assez précises des éléments que vous souhaitez retrouver dans votre site web, vous pouvez nous présentez des exemples de site internet qui vous plaisent. Nous nous en inspirerons pour créer votre propre site internet, sans en faire une pâle copie.<br>
            Concernant les délais, ils dépendent bien évidemment du type de site que vous souhaitez avoir, mais aussi et surtout des éléments qui nous seront fourni pour la création de votre site, c’est-à-dire vos photos déjà choisies et de bonne qualité, des textes rédigés etc. Avec des bons éléments prêt à être utilisés, votre site internet peut être terminé en moins d’une semaine.</div>
 
        <h2 class="next"> <a class="listeTitre " href="#"><img src="">De quel type de site internet mon entreprise a-t-elle besoin ?</a></h2>
        <div class="bloc_blanc listeDescription" style=""></div>
        <div class="listeDescription" style="">Plusieurs choix de sites s’offrent à vous, du blog au site vitrine en passant par la boutique en ligne, chacun répondra à des besoins précis. Ces sites pourront également être reliés à vos réseaux sociaux favoris, pour plus de [&ndash;------]
            Lien rubrique modèles de sites</div> 
 
        <h2 class="next"><a class="listeTitre " href="#"><img src="">Comment arriver en tête des résultats des moteurs de recherche?</a></h2>
        <div class="bloc_blanc listeDescription" style=""></div>
        <div class="listeDescription" style="">Il s’agit ici de savoir correctement articuler/structurer votre site internet afin que celui-ci s’affiche parmi              les premiers résultats de recherche. C’est  le &ndash;référencement-  Lien rubrique référencement</div>
 
        <h2 class="next"><a class="listeTitre " href="#"><img src="">Mon site sera-t-il compatible sur tablettes et smartphones ?</a></h2>
        <div class="bloc_blanc listeDescription" style=""></div>
        <div class="listeDescription" style="">Bien sûre, il suffit simplement d’en faire la demande lors de l’entretien de départ.</div>
 
        <h2 class="next"><a class="listeTitre " href="#"><img src="">J’ai déjà un site internet, pouvez-vous me le remettre au goût du jour ?</a></h2>
        <div class="bloc_blanc listeDescription" style=""></div>
        <div class="listeDescription" style="">Parce qu’Internet évolue en permanence et de manière rapide, modifier un site web prendra autant de temps que de recréer complètement une nouvelle interface, et ne coûtera pas forcément moins chère. C’est pourquoi nous préférons recréer votre site web depuis le début. </div>
 
    </div>
</div>
 
				</article>
				<article>
 
				</article>
			</section>
		</section>
	</section>	
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-12-09T20:25:46.702+01:00" pubdate>2012-12-09T20:25:46.702+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.9.0rc1.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.0.0rc1.js"></script>
	<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>
		"use strict";
 
		$(function(){
 
/*
 * Pas trivial !
 * 
 * On ouvre les deux premières divisions portant la
 * classe "listeDescription" qui suive le tag "a.listeTitre" 
 * qui a été cliqué.
 * 
 * Si on ne doit ouvrir que le second, il faut remplacer :
 * if ( this == jObjs.eq( 0 ).get( 0 ) || this == jObjs.eq( 1 ).get( 0 ) ){
 * par :
 * if ( this == jObjs.eq( 1 ).get( 0 ) ){
 */
$('.listeTitre').click( function(){
	var jObjsDescription = $( ".listeDescription" ),
		jObjs = $( this ).parent().nextAll( ".listeDescription" );
 
	jObjsDescription.slideUp( 800, function(){
		if ( this == jObjs.eq( 0 ).get( 0 ) || this == jObjs.eq( 1 ).get( 0 ) ){
			$( this ).slideDown( 800 );
		}
	});
}); 
 
		});
 
		$( window ).load( function(){
 
		});
	</script>
</body>
</html>

[Oniii]

Parfait j'ai récupérer deux trois truc sur ta page et ça fonctionne !

Un grand merci à tous vous avez une supère communauté =)

Bonne journée à tous