[jQuery] SlideDown un seul à la fois

Bonjour,

J'ai une page HTML avec plusieurs div cachés.
J'aimerais que, lorsque je clique sur un bloc de ma page, le div correspondant s'affiche à l'aide de la fonction SlideDown.
Cependant, j'aimerais que lorsque je clique sur un autre bloc de ma page, le div déjà ouvert disparaisse et le div correspondant s'affiche.

Voici mon code :

<a href="#" onclick="$('#bloc_identify').slideDown('normal'); "></a>
<a href="#" onclick="$('#bloc_capture').slideDown('normal')"></a>

<div id="bloc_identify" >
  <div class="bloc_gauche">
    <div id="scan-button">
      <a id="qrscanbtn" href="#"></a>
    </div>
    <p>scan QR code</p>
  </div>
  <img class="sep" src="images/separateur_addalog.png" alt="" />
  <div class="bloc_droit">
    <select name="facilities">
      <option value="select">List of facilities</option>
      <option value="1">Facility 1</option>
      <option value="2">Facility 2</option>
      <option value="3">Facility 3</option>
    </select>
    <p>or choose facility in a list</p>
  </div>
</div>

<div id="bloc_capture">
  <div class="bloc_gauche">
    <div id="scan-button">
      <a id="takeaphoto" href="#"></a>
    </div>
    <p>scan data display</p>
  </div>
  <img class="sep" src="images/separateur_addalog.png" alt="" />
  <div class="bloc_droit">
    <input type="text" name="zone1" size="7" />
    <div class="txt1">kWh</div>
    <input type="text" name="zone1" size="7" />
    <div class="txt2">A</div>
    <p>or type</p>
  </div>
</div>

Avec ce bout de code, lorsque je clique sur le premier lien, mon bloc "identify" s'affiche.
Par contre, si je clique sur le deuxième lien, mon bloc "capture" s'affiche en dessous du bloc "identify" alors que j'aimerais que le bloc "identify" disparaisse et laisse place au bloc "capture".

Est-il possible de faire cela ?

Merci.
Modifié par Yuuko (27 Aug 2012 - 16:29)