Discussion :

[gilles974]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[marcha]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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';
}

[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é.

[marcha]

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

[gilles974]

pour le code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[marcha]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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';
}