Système div ouvrant et fermant
Bonjour. C'est la première fois que je poste ici cependant, je suis allé sur ce site à plusieurs reprises pour ces tutos complets (tellement à s'y perdre parfois ^^)
Je poste mon problème car depuis quelques temps, je n'ai pas réussi à trouver de solutions à mon pied.
Je suis en train de créer une galerie ergonomique, c'est à dire avec des images classées par catégorie (dessin, 3D...). Au départ, toutes les div sont fermés, c'est à l'utilisateur de cliquer sur une entête (appelé <div id="title1" class="title">) pour ouvrir la galerie correspondante. Si l'utilisateur clique sur une autre div, l'ancienne qui a été ouverte précédemment se referme.
Pour ce qui concerne les animations, je saurai faire, mais c'est le fonctionnement du système globale qui me préoccupe.
Voici mon code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="galerie">
<div class="title" id="title1">Dessin</div>
<div id="genre1" class="genre" ></div>
<div class="title" id="title2">3D</div>
<div id="genre2" class="genre" ></div>
<div class="title" id="title3">Photoshop, Illustrator</div>
<div id="genre3" class="genre" ></div>
<div class="title" id="title4">Mapping</div>
<div id="genre4" class="genre"></div>
<div class="title" id="title5">Autres Travaux</div>
<div id="genre5" class="genre" ></div>
</div> |
Et mon code Javascript (Jquery)
Code:
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
| $(document).ready(function(){
display.init();
});
display ={
init : function(){
$(".genre").hide();
$(".title").click(function(){
display.id = $(this).attr("id"); //je stocke dans une variable le nom de l'id
display.sub = display.id.substr(5,1); //je prends son dernier caractère qui est un chiffre
display.open();
});
},
open : function(){
$("#genre"+display.sub).show(); //j'ouvre la div correspondante, dont l'id se termine par le même chiffre
display.close();
},
close : function(){
$(".title").click(function(){
display.otherid = $(this).attr("id"); //je prends l'id de la nouvelle div ouverte
display.othersub = display.otherid.substr(5,1);
if(display.sub != display.othersub || display.sub == display.othersub)
{
$("#genre"+display.sub).hide(); // si le dernier caractère est différent de celle de l'ancienne DIV ou égale, alors je la ferme.
}
});
}
} |
Là où ça bloque, c'est que j'arrive à ouvrir les blocs, mais quand j'en ouvre une deuxième, ça ne ferme pas la div ouverte précédemment. Du coup, je peux tous les ouvrir.
L'objectif de ce système est d'économiser de l'espace de la page et d'éviter un scrolling.
Je vous remercie.
