Comment puis-je faire en sorte que l'ouverture d'un div ferme tous les autres divs?

Question

J'ai actuellement 2 panneaux (div) en haut de mon site Web. Lorsque vous cliquez sur un lien, il va dérouler le panneau. Lorsque vous cliquez sur l'autre lien, je veux qu'il glisse vers le haut de tous les div ouverts, puis une fois qu'il est glissé, ouvrez le div qui a été cliqué.

J'ai actuellement ceci:

$(document).ready(function(){ 
$(".btnSlideL").click(function(){ 
    $("#clientLogin").slideUp('fast'); 
    $("#languages").slideToggle("fast"); 
    $(this).toggleClass("active"); 
}); 
}); 

$(document).ready(function(){ 
$(".btnSlideC").click(function(){ 
    $("#languages").slideUp('fast'); 
    $("#clientLogin").slideToggle("fast"); 
    $(this).toggleClass("active"); 
}); 

});

et HTML:

<div id="languages" class="topPanel"> 
    <div class="topPanelCont"> 
     languages 
    </div> 
</div> 

<div id="clientLogin" class="topPanel"> 
    <div class="topPanelCont"> 
     client login 
    </div> 
</div> 

<div id="container"> 
    <div id="containerCont"> 
     <div id="headerTop"> 
      <a href="#" title="#" class="btnSlideL">Languages</a> 
      <a href="#" title="#" class="btnSlideC">Client Login</a> 
     </div> 

Mais je pense que c'est un peu longue haleine.

Et ce qui se passe, c'est la Div, ouvre une fois cliqué, mais si vous cliquez sur l'autre, il s'ouvre par-dessus, tandis que l'autre se ferme en dessous.

Un bon exemple de ce que je veux réaliser est here:

Cliquez sur les liens en haut.

Answer 1

Vous souhaitez que l'animation d'ouverture se produise après la fin de l'animation de fermeture. Cela peut être fait en fournissant un rappel à la première animation:

$("#clientLogin").slideUp('fast', function() { 
    $("#languages").slideToggle("fast"); 
}); 

Answer 2

classes ne sont pas destinés à être unique, ils sont censés être ... eh bien, les références d'une manière. En d'autres termes, avoir deux classes nommées de la même façon (la seule différence étant une lettre) va à l'encontre du but d'une classe. Vous les rendez uniques en leur donnant un identifiant.

donc dans votre code, prenez les lettres préfixé sur le nom de classe et dans un id

<div id="headerTop"> 
     <a href="#" title="#" class="btnSlideL">Languages</a> 
     <a href="#" title="#" class="btnSlideC">Client Login</a> 
    </div> 

Comme si ...

<div id="headerTop"> 
     <a href="#" title="#" id="L" class="btnSlide">Languages</a> 
     <a href="#" title="#" id="C" class="btnSlide">Client Login</a> 
    </div> 

Maintenant, vous ne devez pas avoir deux fonctions jquery identiques, uniquement

$(document).ready(function(){ 
$(".btnSlide").click(function(){ 
    $(".topPanel").slideUp('fast'); 
    $(this).toggleClass("active"); 
}); 
$("#L").click(function() { 
    $('#languages').slideDown("fast"); 
}); 
$("#").click(function() { 
    $('#clientlogin').slideDown("fast"); 
});