Afficher div et cacher les autres

Résolu

tiralia Messages postés 1901 Statut Membre -
tiralia Messages postés 1901 Statut Membre - 22 juin 2010 à 11:38

Bonjour,

petit soucis...

voici mon code pour afficher/masquer une div

<html><body><head>
<script language="Javascript">
// La fonction qui affiche/masque l'élément
function bascule(elem)
{
// Quel est l'état actuel ?
etat=document.getElementById(elem).style.visibility;
if(etat=="hidden"){document.getElementById(elem).style.visibility="visible";}
else{document.getElementById(elem).style.visibility="hidden";}
}
</script>
</head>
<body>
<input type="button" onClick="bascule('boite1');" value="On/Off">
<div name="boite1" id="boite1" style="visibility: hidden; position: absolute; left: 280px; top: 58px">
<p>oooooooo</div>

<input type="button" onClick="bascule('boite2');" value="On/Off">
<div name="boite2" id="boite2" style="visibility: hidden; position: absolute; left: 100px; top: 58px">
<p>pppppppp</div>
</body></html>

J'ai donc deux "boites"
J'aimerai que: si je clic sur la première, la deuxième se masque et la première s'affiche
et inversement....

une petite idée?
Un autre langage?

Afficher la suite

2 réponses

Réponse 1 / 2
Andréa

Salut !

<script> 
function visibilite(thingId)
{
if(document.getElementById){
if (thingId=="boîte1"){
tabler1 = document.getElementById('boîte1');
tabler1.style.display="";
tabler2 = document.getElementById('boîte2');
tabler2.style.display="none";
}
if (thingId=="boîte2"){
tabler2 = document.getElementById('boîte2');
tabler2.style.display="";
tabler1 = document.getElementById('boîte1');
tabler1.style.display="none";
}
}
}

</script>

Voilà essaie avec ça à la place de ton script et dis moi ;)
0
1. Andréa
  
  C'est bien ce que tu recherchais ??
  
  0
2. tiralia Messages postés 1901 Statut Membre 268
  
  pas exactement^^
  Je ne souhaite pas rafraichir la page, sinon, c'est très simple en php ou javascript d'afficher ou non tel ou tel div.
  
  merci tout de même pour ta réponse
  
  0
3. tiralia Messages postés 1901 Statut Membre 268
  
  sans compter que la, je n'ai que deux éléments... imaginons qu'il y en ai 50....
  
  0
4. Andréa
  
  De rien ;)
  
  Oui c'est sur que s'il y en a 50...
  
  Je t'envoie autre chose que j'ai pu trouvé même si je pense que ce n'est pas ça que tu recherche, on sait jamais ^^
  
  <script> 
  function visibilite_variable(thingId)
  {
  document.getElementById('boite1').style.display = 'none';
  document.getElementById('boite2').style.display = 'none';
  
  if(document.getElementById(thingId))
  document.getElementById(thingId).style.display='';
  }
  </script>
  
  0
Réponse 2 / 2
tiralia Messages postés 1901 Statut Membre 268

bon, après quelques essais, j'ai fait simple: fonctionne sous ie 6+ FF et Chrome,

<script language="Javascript">
pat=1;
patbis=1;
function bascule()
{
etat=document.getElementById(pat).style.visibility;
document.getElementById(patbis).style.visibility="hidden";
if(etat=="hidden"){document.getElementById(pat).style.visibility="visible";patbis=pat;}
else{document.getElementById(pat).style.visibility="hidden";patbis=pat;}
}
</script>

il suffit d'appeler cette fonction, par un onclick, onmouseover ou autre de cette façon:

onClick="pat=1;bascule();"

puis de créer la div a afficher ou cacher:

<div id="1" style="visibility: hidden; position: relative; left: 280px; top: 58px">
<p>oooooooo<img border="0" src="titre.png" width="379" height="64"></div>

***********************************

Petite explication pour ceux qui veulent le réutiliser et le modifier:

Il faut commencer par donner une valeur a pat et patbis, qui sont les variables servant a savoir quelle div est a afficher et quelle ancienne div est a cacher
cette opération n'est exécutée qu'une fois lors du chargement de la page et permet a la fonction d'avoir une ancienne div a cacher, puisque en réalité il n'y en a pas encore^^

ensuite passons a la

première ligne de la fonction:
elle sert a savoir si la div actuelle (son numéro est dans la variable "pat") est visible ou non actuellement. cette valeur est stockée dans la variable "état"

seconde ligne:
on demande a l'ancienne div de se cacher (son numéro est dans la variable "patbis")

troisième ligne:
si l'état de la div actuelle est cachée, alors la rendre visible et copier le numéro de cette div (pat), dans la variable (patbis)

quatrième ligne:

si l'état de la div actuelle est affichée, alors la rendre invisible et copier le numéro de cette div (pat), dans la variable (patbis)

Lors de l'appel de la fonction, onClick="pat=1;bascule();"
on donne le numéro de la div que l'on veux afficher/cacher puis on appel la fonction

la div doit comporter un id qui correspond a ce que vous avez rentré dans "pat" lors de l'appel de la fonction et elle doit être cachée par défaut style="visibility: hidden;

***********************************

un exemple a copier coller pour tester

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>page de test</title>

<script language="Javascript">
pat=1;
patt=1;
function bascule()
{
etat=document.getElementById(pat).style.visibility;
document.getElementById(patt).style.visibility="hidden";
if(etat=="hidden"){document.getElementById(pat).style.visibility="visible";patt=pat;}
else{document.getElementById(pat).style.visibility="hidden";patt=pat;}
}
</script>

</head>

<body>

<input type="button" onClick="pat=1;bascule();" value="On/Off">

<a href="#" onmouseover="pat=2;bascule();">ceci affiche la div 2 au survol de la souris</a>

<h1>en cliquant sur le mot suivant: <map onClick="pat=2;bascule();">bidule</map> vous afficherez la div 2 aussi</h1>

<div id="1" style="visibility: hidden; position: relative; left: 280px; top: 58px">
<p>ceci est la div1</div>

<div name="2" id="2" style="visibility: hidden; position: relative; left: 100px; top: 58px"> Ceci est la div 2</div>

</body>

</html>

*****************************************

Petit bonus si vous voulez que la div s'affiche au milieu de l'écran et se déplace sans a coups quant vous jouez avec vos ascenseurs:

<div name="2" id="2"style="visibility: hidden; position: fixed; left: 50%; top: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; border: 1px solid #333; background-color: #eee;"> Ceci est la div 2</div>
0

Afficher div et cacher les autres

2 réponses

Discussions similaires

Newsletters