Afficher div et cacher les autres

Résolu/Fermé
Signaler
Messages postés
1568
Date d'inscription
samedi 14 juin 2008
Statut
Membre
Dernière intervention
9 mars 2016
-
Messages postés
1568
Date d'inscription
samedi 14 juin 2008
Statut
Membre
Dernière intervention
9 mars 2016
-
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?

2 réponses

Salut !

<script> <!-- permet de cacher les traitements non sélectionnés et de réinitialiser la page à chaque sélection-->
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 ;)
C'est bien ce que tu recherchais ??
Messages postés
1568
Date d'inscription
samedi 14 juin 2008
Statut
Membre
Dernière intervention
9 mars 2016
255
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
Messages postés
1568
Date d'inscription
samedi 14 juin 2008
Statut
Membre
Dernière intervention
9 mars 2016
255
sans compter que la, je n'ai que deux éléments... imaginons qu'il y en ai 50....
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> <!-- permet de cacher les traitements non sélectionnés et de réinitialiser la page à chaque sélection-->
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>
Messages postés
1568
Date d'inscription
samedi 14 juin 2008
Statut
Membre
Dernière intervention
9 mars 2016
255
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>