affichage/masquage sur clic

Version imprimable

bonjour

j'ai un petit probleme sur une fonction. Je n'arrive pas à la modifier de sorte que lorsque je clik sur une nouvelle zone le block précédemment affichée disparais et laisse la place au nouveau

la fonction est visible à
http://reunion-rando.com/index.php?menu=crtign
Code:

1 2 3 4 5 6 function deplier(id){ var cible = document.getElementById(id); if (cible.style.display == 'block') cible.style.display = 'none'; else cible.style.display = 'block'; }
un des blocs à afficher
Code:

1 2 3 4 <div id="block-01" align="justify" class="voir"> <br><br><b>4401RT :</b> La possession, Le bois de Nefles, L'etang, Boucan Canot, Saint Gilles les Bains, l'Hermitage les Bains, la Saline les Bains, Saint Gilles les hauts, la Saline les hauts, Trois Bassins, Petite France, Piton Maïdo </div>
merci d'avance pour le coup de pouce

Salut,

Tu peux soit remettre tous les blocs à display none avant d'afficher le bloc

soit tu peux mémoriser le dernier bloc affiché dans une variable, quelque
chose dans ce genre:
Code:

1 2 3 4 5 6 7 8 var old; function deplier(id){ if(old) document.getElementById(old).style.display = 'none'; old = cible; var cible = document.getElementById(id); if (cible.style.display == 'block') cible.style.display = 'none'; else cible.style.display = 'block'; }

28/04/2009, 17h18
gilles974

merci pour ta réponse

mais j'ai toujours le même effet un clic sur un lien, le bloc_1 apparais un autre clic dessus il disparais

si je clic sur un autre lien le bloc_2 s'affiche mais le bloc_1 reste affiché.
28/04/2009, 17h25
marcha

Tu peux poster une version minimaliste avec le code html et javascript stp ?

pour le code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<map name="crtign">
<area shape="rect" coords="14,6,134,154" href="#" onclick="deplier('block-01');">
.
.
<area shape="rect" coords="240,176,377,329" href="#" onclick="deplier('block-06');">
</map>
 
<div id="block-01" align="justify" class="voir">
bla bla bla bla bla bla bla bla bla 
</div>
.
.
<div id="block-06" align="justify" class="voir">
bla bla bla bla bla bla bla bla bla 
</div>

pour le code javascript

Code:

1
2
3
4
5
6
7
8
9
 
function deplier(id){  
var old;
  if(old) document.getElementById(old).style.display = 'none';
  old = cible;
  var cible = document.getElementById(id);
  if (cible.style.display == 'block') cible.style.display = 'none';
  else cible.style.display = 'block';
}

pour le code css

Code:

1
2
 
.voir {width: 393px; display: none; text-align: justify; background-color: #FFFF99}

Arg, mea culpa, j'ai fait une grossière erreur, essaie ceci:

Code:

1
2
3
4
5
6
7
8
function deplier(id){  
  var old;
  if(old) document.getElementById(old).style.display = 'none';
  old = id;
  var cible = document.getElementById(id);
  if (cible.style.display == 'block') cible.style.display = 'none';
  else cible.style.display = 'block';
}

28/04/2009, 19h12
gilles974

désole même punition

le bloc précédent reste affiché
28/04/2009, 19h18
marcha

Hihi, je suis autant fatigué que toi :-)

tu as mis mon var old; dans la fonction, il doit être dehors
28/04/2009, 19h27
gilles974

j'ai résonné comme en php en intégrant la variable dans la fonction

en la mettant dehors ca marche beaucoup mieux

merci du coup de maim ;)