Afficher div et cacher les autres

Résolu

tiralia Messages postés 1577 Date d'inscription Statut Membre Dernière intervention -
tiralia Messages postés 1577 Date d'inscription Statut Membre Dernière intervention - 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

A voir également:

Afficher div et cacher les autres
Windows 11 afficher d'autres options - Guide
Afficher appdata - Guide
Cacher son numéro - Guide
Cacher conversation whatsapp - Guide
Cacher ses amis sur facebook - Guide

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

Andréa

C'est bien ce que tu recherchais ??

tiralia Messages postés 1577 Date d'inscription Statut Membre Dernière intervention 256

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 1577 Date d'inscription Statut Membre Dernière intervention 256

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

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>

Réponse 2 / 2

tiralia Messages postés 1577 Date d'inscription Statut Membre Dernière intervention 256

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

Afficher toutes les lignes masquées excel

Durée d'une diapositive animée

additionner nombres dans cellules avec texte

remettre toutes les colonnes et les lignes masquées

Votre réponse

Discussions similaires