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.