jQuery - click link to open Div, which closes other div's

Question

I currently have 2 panels (div's) at the top of my website. When you click a link it will drop down the panel, when you click the other link, i want it to slide up any open div's then once it's slide up, open the div clicked.

I currently have this:

$(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");
});

});

and 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>

But i think its a bit long-winded.

And what happens, is the Div, opens once clicked, but if you click the other, it opens it over the top, while the other closes beneath.

A good example of what i want to achieve is here:

http://alturl.com/fkbru

click the links at the top.

Answer 1

You want the opening animation to happen after the closing animation has ended. This can be done by providing a callback to the first animation:

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

Answer 2

Classes aren't meant to be unique, they're meant to be...well, references in a way.

In other words, having two classes named the same (only difference being one letter) defeats the purpose of a class. You make them unique by giving them an id.

So in your code, take the prepended letters out of the class name and into an id

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

Like so...

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

Now you don't have to have two identical jquery functions, Only

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