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

Messages postés
11
Date d'inscription
mercredi 13 août 2008
Dernière intervention
4 septembre 2010
- 26 août 2010 à 20:14 - Dernière réponse :
Messages postés
11
Date d'inscription
mercredi 13 août 2008
Dernière intervention
4 septembre 2010
- 4 sept. 2010 à 22:40
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.
Afficher la suite 

Votre réponse

11 réponses

Meilleure réponse
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 31 août 2010 à 15:28
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 87 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Messages postés
11
Date d'inscription
mercredi 13 août 2008
Dernière intervention
4 septembre 2010
- 26 août 2010 à 20:17
0
Merci
Mince, j'ai posté au mauvais endroit.
Commenter la réponse de charlie101097
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 27 août 2010 à 10:59
0
Merci
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
<html>
<head>
<script type="text/javascript">
function SwapDisplay( id_){
  //-- 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 visible on cache sinon on montre
      if( T_Span[i].style.display == "inline")
        T_Span[i].style.display = "none";
      else
        T_Span[i].style.display = "inline";
    }
  }
}
</script>
<style type="text/css">
#D_MAIN span {
  display : none;
  color : red;
}
</style>
</head>



  Chapitre

  du texte ici Texte 1


  encore du texte Texte 2


  toujours du texte Texte 3





</html> 

cliques sur Chapitre pour voir...
;O)
Commenter la réponse de PetoleTeam
Messages postés
11
Date d'inscription
mercredi 13 août 2008
Dernière intervention
4 septembre 2010
- 27 août 2010 à 13:56
0
Merci
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 :)
Commenter la réponse de charlie101097
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 27 août 2010 à 14:42
0
Merci
...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
<html>
<head>
<style type="text/css">
#chapitre_1 span { display : none; color : red;}
#chapitre_2 span { display : none; color : blue;}
#chapitre_3 span { display : none; color : green;}
</style>
<script type="text/javascript">
</script>
</head>



  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





</html> 

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)
Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 27 août 2010 à 14:46
0
Merci
BUG
...ce n'est pas La fonction de visualisation Voir( num_), mais La fonction de visualisation Montre( num_) qu'il faut lire...
;O)
Commenter la réponse de PetoleTeam
Messages postés
11
Date d'inscription
mercredi 13 août 2008
Dernière intervention
4 septembre 2010
- 27 août 2010 à 16:51
0
Merci
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.












<!--selection chapitres DEBUT-->


Chapitres : 


  [javascript:toggleVisibility('1') 2 ]|
[javascript:toggleVisibility('1') 3 ]|
[javascript:toggleVisibility('1') 4 ]|
[javascript:toggleVisibility('1') 5 ]


<!--selection chapitres FIN-->





Histoires
 






























Saison 1


<!-- début chapitre 1 -->

Chapitre Texte 1 a afficher ici





<hr/>







texte 2 à afficher ici




Fin chapitre 1



<!-- 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
-------
-------------------
Commenter la réponse de charlie101097
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
- 28 août 2010 à 16:51
0
Merci
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
<!--selection chapitres DEBUT-->


  Chapitres :
    [# 1 ]|
    [# 2 ]|
    [# 3 ]|
    [# 4 ]
  

<!--selection chapitres FIN-->

et la mise en place des IDs serait du style
<!-- ICI -->


  

    
Saison 1

    <!-- début chapitre 1 -->
    Chapitre 1
    Texte 1 a afficher ici
  

  
<hr/>

  

    texte 2 à afficher ici


    Fin chapitre 1

  



<!-- Fin chapitre 1 -->

à toi donc d'adapter...
;O)
Commenter la réponse de PetoleTeam
Messages postés
11
Date d'inscription
mercredi 13 août 2008
Dernière intervention
4 septembre 2010
- 28 août 2010 à 23:07
0
Merci
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 ?
Commenter la réponse de charlie101097
Messages postés
11
Date d'inscription
mercredi 13 août 2008
Dernière intervention
4 septembre 2010
- 30 août 2010 à 14:36
0
Merci
J'ai tenté de mettre le style dans les SPAN mais ça ne marche toujours pas.
Commenter la réponse de charlie101097
Messages postés
11
Date d'inscription
mercredi 13 août 2008
Dernière intervention
4 septembre 2010
- 4 sept. 2010 à 22:40
0
Merci
Je viens de tester tout ça et ça marche parfaitement.
Merci bien de ton aide, et de ta patience :)
Problème résolut.
Commenter la réponse de charlie101097

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.