Afficher / cacher plusieurs div en même temps à différents endroits.Résolu

Question

Bonjour,
je me suis renseigné sur le forum sans trouvé une réponse corrigeant mon problème. N'étant qu'un débutant j'ai assez peu d'idées pour mon problème.

Voici le code pour afficher cacher que j'utilise. à noter que j'utilise ce script pour plusieurs page, donc j'utilise le OnlyOne et ToogleVisibility avec ce même code.


// Méthode pour changer la visiblité 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.

Chapitres : 
[javascript:onlyOne('1') 1 ]
[javascript:onlyOne('2') 2 ]
[javascript:onlyOne('3') 3 ]
[javascript:onlyOne('4') 4 ]
[javascript:onlyOne('5') 5 ]
[javascript:onlyOne('6') 6 ]
[javascript:onlyOne('7') 7 ]
[javascript:onlyOne('8') 8 ]
[javascript:onlyOne('9') 9 ]




Le code qui cache et affiche à la demande.


texte


texte


texte


texte


texte


texte


texte


texte


texte



voila mon problème : je souhaite que quand je clique sur la selection du chapitre 2 :
[javascript:onlyOne('2') 2 ]

je puisse afficher plusieurs div avec ça. soit :



Chapitre 2


texte contenu


texte C


 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





mais à chauque 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.

J'espère que vous pourrez m'aider. Merci d'avance.

PetoleTeam · Accepted Answer

Bonjour,
Visiblement changement de stratégie pour ton affichage...
C'est la totalité des chapitres qui n'apparaissent plus maintenant, au vue de ton récent code.
Ceci amène plusieurs remarques
- DIV dans SPAN = mauvaise pratique, un élément inline ne peut contenir un élément block, alors que l'inverse oui.
Donc il faut faire


  blabla

et non 

  
blabla


- Si tu englobes la totalité du chapitre dans un SPAN celui ci n'est plus nécessaire, il te faut juste gérer dans la fonction Display() la DIV un point c'est tout.
La fonction devenant
//---------------------------
function Display( id_, etat_){
  //-- Recup Objet contenant
  var Obj = document.getElementById( id_);
  if( Obj){
    //-- Si etat_ false on cache sinon on montre
    if( !etat_)
      Obj.style.display = "none";
    else
      Obj.style.display = "inline";
  }
}
- concernant la ligne

le résultat que tu obtiens est correct, attendu que tu ne passe pas la visibility à visible en même temps que tu changes le display

-pour ton cas il te faut ne rien mettre sur le Chapitre 1 et mettre au autres Chapitres display:none

;O)

charlie101097 · Answer

Mince, j'ai posté au mauvais endroit.

PetoleTeam · Answer

Bonjour, Donc que plusieurs div ayant la même id,... Mauvaise ID, une ID doit être UNIQUE ...mais à chauque fois, il n'y à que le premier qui s'ouvre. ... ...donc c'est normal Il te faut revoir ta stratégie en incluant des SPANs, par exemple, dans une DIV. petit exemple rapide du principe Chapitre du texte ici Texte 1 encore du texte Texte 2 toujours du texte Texte 3 cliques sur Chapitre pour voir... ;O)

charlie101097 · Answer

Bonjour, 

Merci de ta réponse.

En effet c'est quelque chose comme ça que j'essaie de faire.
Cependant, je ne craint qu'avec ce système de span, je ne puisse afficher que un seul chapitre. 
Par exemple : j'ai chapitre 1 et chapitre 2 comportant des textes différents qu'il faut afficher. Cependant, si le chapitre 1 est affiché, alors le 2 est caché et inversement (et ce pour une dizaine de chapitres. Un s'affiche, les autres se caches.).

Je me suis aussi aperçu qu'il y avait un problème, dans le sens où je ne souhaite pas qu'on puisse fermer le texte affiché en re-cliquant sur chapitre 1 (si le texte 1 était affiché) mais que seulement en cliquant sur un autre chapitre, celui ci remplace le contenu du texte par le sien et on peu ré-afficher alors le chapitre 1 en cliquant dessus.

Voilà, j'espère m'être fait comprendre :)

PetoleTeam · Answer

...Je me suis aussi aperçu qu'il y avait un problème, ... je t'ai proposé une approche qui effectivement ne répond pas complètement à ton soucis ...Cependant, je ne craint qu'avec ce système de span, je ne puisse afficher que un seul chapitre.... Non tu fais ce que tu veux à condition de tout effacer dans un premier temps et de n'afficher que celui qui t'intéresse ensuite, et ce à l'intérieur d'une même DIV conteneur. Reprenons l'exemple en modifiant pour mieux coller à ton soucis d'abord le HTML pur avc un peu de style pour la vue Chapitre 1 du texte ici Texte 1 encore du texte Texte 2 toujours du texte Texte 3 Chapitre 2 du texte ici Texte 1 encore du texte Texte 2 toujours du texte Texte 3 Chapitre 3 du texte ici Texte 1 encore du texte Texte 2 toujours du texte Texte 3 Tu noteras que les DIV s'appellent chapitre_1, chapitre_2 etc... pour optimisation du code. La fonction de visualisation Voir( num_) reste à définir comme suit //-------------------- function Montre( num_){ //-- On cache tout, c'est optimisable !! Display( 'chapitre_1', false); Display( 'chapitre_2', false); Display( 'chapitre_3', false); //-- On montre le bon Display( 'chapitre_'+ num_, true); } maintenant c'est la fonction Display (id_, etat_) qui reste à définir, elle peut ressembler à ce qui suis, qui est proche de celle présentée plus haut... //--------------------------- function Display( id_, etat_){ //-- Recup Objet contenant var Obj = document.getElementById( id_); if( Obj){ //-- Recup NodeList des SPAN var T_Span = Obj.getElementsByTagName('SPAN'); //-- Pour tous les SPAN for( var i =0, nb = T_Span.length; i < nb; i++){ //-- Si etat_ false on cache sinon on montre if( !etat_) T_Span[i].style.display = "none"; else T_Span[i].style.display = "inline"; } } } Voila en regroupant le tout tu auras un aperçu plus précis, sachant que tu peux remplacer les SPANs par des DIVs, mais que des DIVs avec un style.display en inline c'est des SPANs ou pas loin. La tu as le principe de ce que tu peux faire sans trop de code... ;O)

PetoleTeam · Answer

BUG
...ce n'est pas La fonction de visualisation Voir( num_), mais La fonction de visualisation Montre( num_) qu'il faut lire...
;O)

charlie101097 · Answer

En effet cela permet d'afficher plusieurs textes placés à différents endroits, mais en fait la sélection de chapitre est placée en haut de la page ce qui fait que je ne peux pas utiliser les div. Pour mieux me faire comprendre voici à quoi ressemble le code de la page. Dans ce code j'ai pris que la sélection 1 pour exemple avec le code qui nécessite des span. Chapitres : [javascript:toggleVisibility('1') 2 ]| [javascript:toggleVisibility('1') 3 ]| [javascript:toggleVisibility('1') 4 ]| [javascript:toggleVisibility('1') 5 ] Histoires Saison 1 Chapitre Texte 1 a afficher ici

texte 2 à afficher ici Fin chapitre 1 Avec les href, je pouvais relier n'importe où dans la page, mais là je dois étendre les div des sélections ce qui n'est pas possible car la sélection 1 engloberait alors la 2 qui engloberait la 3 et ainsi de suite. Voici un exemple de ce à quoi ça ressemble. Chaptire : 1 | 2 | 3 | 4 ------------------ texte 1 chapitre 1 -------- séparaeur ------- texte 2 chapitre 1 ------- ------------------- ------------------ texte 1 chapitre 2 -------- séparateur ------- texte 2 chapitre 2 ------- ------------------- ------------------ texte 1 chapitre 3 -------- séparateur ------- texte 2 chapitre 3 ------- -------------------

PetoleTeam · Answer

Bonjour, Avec les href, je pouvais relier n'importe... je répète je t'ai montré une méthode, il faut que tu adaptes pour les HREFs cela donne cela Chapitres : [# 1 ]| [# 2 ]| [# 3 ]| [# 4 ] et la mise en place des IDs serait du style Saison 1 Chapitre 1 Texte 1 a afficher ici

texte 2 à afficher ici Fin chapitre 1 à toi donc d'adapter... ;O)

charlie101097 · Answer

Re-bonjour,

Tout d'abord, merci pour ta patience et ton aide .

Pour les href, je pensais qu'il ne marchaient plus dans ce cas là.

J'ai ajouté des morceaux de design avec les DIV dans les  pour que ce soit moins bordélique avec le afficher / cacher.

j'obtiens donc :










 

  

    
Saison 1

    
    Chapitre 1 : Titre du chapitre 1
  

  


  

    Histoire chapitre 1


    Fin chapitre 1

  

 

 






 
 















 

  

    
Saison 1

    
    Chapitre 2 :blablabal chapitre 2
  

  


  

    texte chapitre 2


    Fin chapitre 2

  

 

 






 
 






Par contre quand j'ouvre la page j'ai le chapitre 1 ouvert, ce qui est bon, mais mon problème c'est que tout les chapitres aussi son visibles.

j'ai tenté un :


mais le problème c'est que il y a un espace réservé au chargement de la page et ça ne s'affiche pas en cliquant sur le lien.

J'ai alors tenté 


là il n'y a que le chapitre 1 qui s'affiche au chargement de la page sans aucun espace réservé. Cependant le lien href vers celui-ci ne l'affiche plus.

Aurais tu encore une solution ?

charlie101097 · Answer

J'ai tenté de mettre le style dans les SPAN mais ça ne marche toujours pas.

charlie101097 · Answer

Je viens de tester tout ça et ça marche parfaitement.
Merci bien de ton aide, et de ta patience :)
Problème résolut.

Afficher / cacher plusieurs div en même temps à différents endroits.

11 réponses

Votre réponse