Bonjour,

je créer une fonction javascript qui en pressant un lien me permet d'afficher une div, si je clique sur un autre lien, la div correspondante s'affiche.

<!--Mon lien est de la forme suivante : -->
<a href="#minichat" class="bouton">Le minichat</a>
<!--ma div de la sorte-->
<div id="section_minichat" class="section_module">...</div>

Comment récupérer #minichat pour l'insérer à section_minichat
De cette facon, je clique sur un lien, je récupère son attribut, et demande à javascript de m'afficher l'élément section_y. Et cache le module ouvert.

Le fonctionnement ressemble à celui des options du sdz. Mais mis à une autre sauce.

Merci de votre aide

Aïe ! Non non et non. On ne se sert pas du href d'un lien pour identifier un div à afficher !

Fais plutôt quelque chose du genre :

<!-- Un bouton, avec l'apparence d'un lien, via CSS -->
<button type="button" class="lien" onclick="toggle_display('minichat')">Le minichat</button>
<!--ma div de la sorte-->
<div id="section_minichat" class="section_module" style="display:none;">...</div>
<script type="text/javascript">
function toggle_display(nom) {
  var div = document.getElementById("section_"+nom);
  if(div.style.display != "none") {
    div.style.display = "none";
  } else {
    div.style.display = "";
  }
}
</script>

heu, oui, mais le problème c'est que mon lien n'est pas text, mais une petite image, si je prend <button>, j'ai plus d'image ...

tu peux faire la même chose avec un lien, mais dans ce cas là il lui donner pour href="#" et à la fin de la fonction rajouter "return false;" :

<a href="#" onclick="toggle_display('minichat')"><img src="img.jpg"/></a>

et :

function toggle_display(nom) {
  var div = document.getElementById("section_"+nom);
  if(div.style.display != "none") {
    div.style.display = "none";
  } else {
    div.style.display = "";
  }
  return false;
}

Ou sinon tu fait ça mais en le mettant directement sur l'image :

<img src="img.jpg" onclick="toggle_display('minichat')"/>

Ou sinon, tu mets ton image dans le button... -_-'

<button type="button" onclick="toggle_display('minichat');"><img src="img.jpg" /></button>

Le CSS se chargera de peaufiner l'apparence du bouton.

j'ai mi le code. mais le javascript ne fonctionne pas, quand je clique rien ne s'affiche

Chez moi ça fonctionne du feu de dieu...

<button type="button" onclick="toggle_display('minichat');"><img src="img.jpg" /></button>

<div id="section_minichat" class="section_module" style="display:none;">...</div>

<script type="text/javascript">
function toggle_display(nom) {
  var div = document.getElementById("section_"+nom);
  if(div.style.display != "none") {
    div.style.display = "none";
  } else {
    div.style.display = "";
  }
}
</script>

ok, chez moi aussi ce portotype fonctionne, mais cependant, quand tu insères plusieurs bouton, que tu clic sur le bouton 1, la div approprié se montre, mais quand tu clic sur bouton 2, la 1er div ne se masque pas. Comment faire ?

Tu peux par exemple utiliser un conteneur pour regrouper tous tes divs à afficher/masquer :

<button type="button" onclick="toggle_display('minichat');"><img src="img.jpg" /></button>
<button type="button" onclick="toggle_display('yop');"><img src="img2.jpg" /></button>

<div id="conteneur">

<div id="section_minichat" class="section_module" style="display:none;">...</div>
<div id="section_yop" class="section_module" style="display:none;">...</div>

</div>

<script type="text/javascript">
function toggle_display(nom) {
  var divs = document.getElementById("conteneur").getElementsByTagName("div");
  for(var i=0,l=divs.length;i<l;i++) {
    divs[i].style.display = "none";
  }
  var div = document.getElementById("section_"+nom);
  if(div.style.display != "none") {
    div.style.display = "none";
  } else {
    div.style.display = "";
  }
}
</script>

Merci