Afficher div et cacher les autres

Résolu/Fermé

tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 - 13 juin 2010 à 13:16
tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 - 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?

A voir également:

Afficher div et cacher les autres
Windows 11 afficher d'autres options - Guide
Cacher conversation whatsapp - Guide
Afficher appdata - Guide
Cacher application android - Guide
Cacher les amis sur facebook - Guide

2 réponses

Réponse 1 / 2

Andréa
Modifié par Andréa le 14/06/2010 à 14:17

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 ;)

Andréa
16 juin 2010 à 14:26

C'est bien ce que tu recherchais ??

tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 256
17 juin 2010 à 15:12

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

tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 256
17 juin 2010 à 15:14

sans compter que la, je n'ai que deux éléments... imaginons qu'il y en ai 50....

Andréa
18 juin 2010 à 09:03

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>

Réponse 2 / 2

tiralia Messages postés 1575 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 9 mars 2016 256
22 juin 2010 à 11:38

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>

Discussions similaires

Cellules en surbrillance selon une TextBox

Cacher les membres du groupe WhatsApp