Discussion :

[Mauno]

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 :

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
// 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 :

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

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 :

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

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 :

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

<a href="javascript:onlyOne('2')">2 </a>

je puisse afficher plusieurs div avec ça. soit :

Code :

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

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 :

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

<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.

[Bovino]

Donc que plusieurs div ayant la même id, s'affichent quand on demande d'afficher l'id 2

Ce n'est pas possible : un id DOIT être unique dans la page (et au passage, un id ne doit pas commencer par un chiffre) !

[Mauno]

Pourtant avec :

Code :

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

<a href="javascript:ToggleVisibility('2')">1 </a>

j'arrive à afficher plusieurs parties différentes ayant la même id. soit par exemple

Code :

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

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>

Mais Ici le toggleVisibility me serait utile pour afficher plusieurs parties mais ça pose problème pour que les différents chapitres ne s'affichent pas en même temps.