Discussion :

[aliaspedro]

Bonjour.

Je crée un deuxième sujet puisque mon ancien sujet a été marqué comme résolu et qu'après l'avoir remonté pour résoudre un mini problème, on m'a conseillé de créer un nouveau sujet.
Je remercie encore pour l'aide d'avant.

Je remonte ce sujet car j'ai un autre soucis toujours en lien avec le sujet que vous pouvez voir à ce lien : http://www.developpez.net/forums/d12...vrant-fermant/

Pour résumé le système :
J'ai fait une galerie ergonomique pour montrer mes oeuvres, pourquoi ergonomique ? Parce que ce système doit prendre le moins de place possible sur la page tout en étant lisible bien évidemment.
Lorsque je clique sur un bloc qui est sur le côté, il m'ouvre un bloc avec la galerie correspondante. Par exemple, je clique sur dessin, il m'ouvrira dans le bloc dessin. Et lorsque je clique sur un autre bloc pour ouvrir une autre galerie, la div ouverte précédemment se ferme pour laisser place à la nouvelle.
Avec l'aide fournit la dernière fois, le système fonctionne.
Cependant, lorsque je clique sur le même bloc, donc lorsque j'ouvre la même galerie, je voudrai qu'elle se referme. J'ouvre la galerie dessin, si je reclique à nouveau sur dessin, elle se ferme. Le système actuel ne permet pas de refermer la galerie. Il ferme la galerie pendant un cours moment (le temps de l'animation) pour la réouvrir ensuite.
Si vous comprenez ce que je veux dire.

Voici le code :

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
$(document).ready(function(){
	display.init();
});
 
display ={
 
	init : function(){
		$(".genre").hide();
		$(".title").click(function(){	
		$("div.genre:visible").hide(500); //je masque tous les div.genre ouverts (visibles) avant d'ouvrir un autre
		display.id = $(this).attr("id");
		display.sub = display.id.substr(5,1);
 
		display.largeur = 650;
		$(".genre").css({width:display.largeur+"px"});
 
		$("#genre"+display.sub).show(500); //j'ouvre la div correspondante, dont l'id se termine par le même chiffre	
		});
	}	
}

Code HTML : (ne faites pas attention au code php :p)

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
<div id="globaltitle">
			<div class="title" id="title1">Dessin</div>
			<div class="title" id="title2">3D, Mapping</div>
			<div class="title" id="title3">Jeux Vidéo</div>
			<div class="title" id="title4">Photoshop, Illustrator</div>
			<div class="title" id="title5">Autres Travaux</div>	
		</div>
 
		<div id="galerie">
			<div id="genre1" class="genre" >
				<?php while($kind1=mysqli_fetch_array($genre1))
                                                {
                                                        echo'<div class="mini"><a href="img/creations/'.$kind1['max'].'" class="zoombox zgallery1" title="'.$kind1['nom'].'"><img src="img/creations/'.$kind1['min'].'"/></a></div>';
                                                }
                                ?>
			</div>
 
			<div id="genre2" class="genre" >
				<?php while($kind2=mysqli_fetch_array($genre2))
                                                {
                                                        echo'<div class="mini"><a href="img/creations/'.$kind2['max'].'" class="zoombox zgallery2" title="'.$kind2['nom'].'"><img src="img/creations/'.$kind2['min'].'"/></a></div>';
                                                }
                                ?>
			</div>
 
			<div id="genre3" class="genre" >
				<?php while($kind3=mysqli_fetch_array($genre3))
                                                {
                                                        echo'<div class="mini"><a href="img/creations/'.$kind3['max'].'" class="zoombox zgallery3" title="'.$kind3['nom'].'"><img src="img/creations/'.$kind3['min'].'"/></a></div>';
                                                }
                                ?>
			</div>
 
			<div id="genre4" class="genre" >
				<?php while($kind4=mysqli_fetch_array($genre4))
                                                {
                                                        echo'<div class="mini"><a href="img/creations/'.$kind4['max'].'" class="zoombox zgallery4" title="'.$kind4['nom'].'"><img src="img/creations/'.$kind4['min'].'"/></a></div>';
                                                }
                                ?>
			</div>
 
			<div id="genre5" class="genre" >
				<?php while($kind5=mysqli_fetch_array($genre5))
                                                {
                                                        echo'<div class="mini"><a href="img/creations/'.$kind5['max'].'" class="zoombox zgallery5" title="'.$kind5['nom'].'"><img src="img/creations/'.$kind5['min'].'"/></a></div>';
                                                }
                                ?>
			</div>

Je cherche à comprendre comment on peut dire de fermer la div si on clique sur la même. Je sais qu'il y a un test à faire, mais c'est comment déclarer cette similitude qui me dérange. Sachant que j'ai déjà essayé de créer une nouvelle variable si je clique à nouveau sur une div et faire une comparaison entre l'ancienne et la nouvelle variable pour savoir si c'est la même div sur laquelle je clique.

Merci =)

[NoSmoking]

Bonjour,
tu n'as qu'à tester son état, visible/masquée, avant de lancer les actions et en final si elle était masquée tu l'affiches sinon tu ne fais rien.(c'est le plus facile)

[SpaceFrog]

un truc comme ça ?
http://jsfiddle.net/7k7pm/1/

[NoSmoking]

Je voyais plutôt un truc dans l'esprit de ceci

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
init : function(){
  $(".genre").hide();
  $(".title").click(function(){
    display.id = $(this).attr("id");
    display.sub = display.id.substr(5,1);
    display.largeur = 650;
    // recup état de l'objet
    var obj = $("#genre"+display.sub);
    var isHidden = obj.is(':hidden');
 
    $("div.genre:visible").hide(500); //je masque tous les div.genre ouverts (visibles) avant d'ouvrir un autre
    $(".genre").css({width:display.largeur+"px"});
    // si il est caché dans ce cas on le montre
    if( isHidden){
      obj.show(500);
     }
  });
}