Afficher/cacher plusieurs div en même temps
Bonjour,
J'ai tenté de faire un système de afficher/cacher afin d'afficher des parties d'histoires sans qu'il y ait besoin d'un temps de chargement de toute la page.
Le problème c'est que j'ai trouvé pas mal de solution diverses concernant une partie de mon problème mais jamais de solution réelle à tout mon problème. J'ai tenté de mettre en relation toutes les solutions trouvées sans succès.
Voici le code pour afficher cacher que j'utilise. A noter que j'utilise ce script pour plusieurs page, donc j'utilise le OnlyOne et ToogleVisibility avec ce même code.
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
34
35
36
37
38
39
40
41
42
43
| // Méthode pour changer la visibilité d'une balise dont l'ID est passée en paramètre
function toggleVisibility(tagId) {
if (!document.getElementById) {
msg = 'Votre navigateur est trop ancien pour ce site';
msg += 'Veuillez le mettre à jour ou vous en procurer un autre';
return false;
}
var tagToToggle;
try { // On tente de récupérer la balise cible dont on doit changer la visibilité
tagToToggle = document.getElementById(tagId);
} catch (e) { // Si échec de la récupération de la balise cible
alert('la balise cible reste introuvée');
}
try { // Seulement pour les non IE
if (tagToToggle.style.display == 'none') {
tagToToggle.style.display = 'inline';
} else {
tagToToggle.style.display = 'none';
}
} catch (e) {
}
// Pour IE
if (tagToToggle.style.visibility == 'hidden') {
tagToToggle.style.visibility = 'visible';
} else {
tagToToggle.style.visibility = 'hidden';
}
}
var onlyOne = (function(){
var precedentId = null;
return function(tagId) {
if(precedentId != null){
toggleVisibility(precedentId); // dans le cas où il y avait un précédent élément qui a été affiché, on ne l'affiche plus
}
if(precedentId != tagId){
toggleVisibility(tagId); //on affiche le nouvel élément
precedentId = tagId;
}else{
precedentId = null; //il s'agit du méme élément qui est sélectionné, on considére donc qu'il n'y a plus d'élément affiché
}
};
})(); |
Le code avec lequel on clique sur le chapitre souhaité pour afficher le div.
Code:
1
2
3
4
5
6
7
8
9
| <a href="javascript:onlyOne('1')">1 </a>
<a href="javascript:onlyOne('2')">2 </a>
<a href="javascript:onlyOne('3')">3 </a>
<a href="javascript:onlyOne('4')">4 </a>
<a href="javascript:onlyOne('5')">5 </a>
<a href="javascript:onlyOne('6')">6 </a>
<a href="javascript:onlyOne('7')">7 </a>
<a href="javascript:onlyOne('8')">8 </a>
<a href="javascript:onlyOne('9')">9 </a> |
Le code qui cache et affiche à la demande.
Code:
1
2
3
4
5
6
7
8
9
| <div id="1" style="visibility: hidden; display: none;">texte</div>
<div id="2" style="visibility: hidden; display: none;">texte</div>
<div id="3" style="visibility: hidden; display: none;">texte</div>
<div id="4" style="visibility: hidden; display: none;">texte</div>
<div id="5" style="visibility: hidden; display: none;">texte</div>
<div id="6" style="visibility: hidden; display: none;">texte</div>
<div id="7" style="visibility: hidden; display: none;">texte</div>
<div id="8" style="visibility: hidden; display: none;">texte</div>
<div id="9" style="visibility: hidden; display: none;">texte</div> |
voila mon problème : je souhaite que quand je clique sur la selection du chapitre 2 :
Code:
<a href="javascript:onlyOne('2')">2 </a>
je puisse afficher plusieurs div avec ça. soit :
Code:
1
2
3
| <div id="2" style="visibility: hidden; display: none;">Chapitre 2</div>
<div id="2" style="visibility: hidden; display: none;">texte contenu</div>
<div id="2" style="visibility: hidden; display: none;">texte C</div> |
A noter que les textes "Chaptre 2", Texte contenu" et "Texte C" sont séparés par d'autres textes.
Je souhaite que lorsque je clique sur "2", plusieurs textes placés à plusieurs endroits s'affichent. Donc que plusieurs div ayant la même id, s'affichent quand on demande d'afficher l'id 2 pour l'exemple d'ici.
Cependant. Je souhaite en même temps que si je clique sur "3", tout les div ayant l'id 2 se ferment et laissent places aux id 3 et ainsi de suite.
j'ai essayé de mettre plusieurs
Code:
<div id="2" style="visibility: hidden; display: none;"></div>
mais à chaque fois, il n'y à que le premier qui s'ouvre.
Si je ne met pas le code en onlyOne, et que je clique sur le 3, le 3 s'affiche mais le 2 reste. donc je suis obligé d'utiliser OnlyOne.
Enfin, est-ce possible que lorsque l'on clique sur "1", la partie id=1 s'affiche mais qu'on ne puisse alors plus cacher cette partie si on re-clique sur 1 tant qu'elle est affichée ?
Je reste disponible pour de plus amples informations ;).
J'espère que vous pourrez m'aider. Merci d'avance.
