Как я могу сделать открытие div закрыть все остальные div?

Question

В настоящее время у меня есть 2 панели (div) в верхней части моего сайта. Когда вы нажимаете на ссылку, она выпадает из панели. Когда вы нажимаете на другую ссылку, я хочу, чтобы она сдвигалась вверх по любому открытому элементу div, а затем, когда он сдвинулся вверх, откройте раздел, по которому щелкнули

У меня сейчас есть это:

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

});

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

Но я думаю, что это немного скучно.

И что происходит, это Div, который открывается после щелчка, но если вы щелкаете по другому, он открывает его сверху, а другой закрывается внизу.

Хороший пример того, чего я хочу достичь, это здесь :

Нажмите на ссылку вверху.

Answer 1

Классы не должны быть уникальными, они должны быть ... ну, ссылки в некотором роде.

Другими словами, наличие двух классов, названных одинаково (единственное отличие - одна буква), отрицательно сказывается на назначении класса. Вы делаете их уникальными, давая им идентификатор.

Так что в вашем коде возьмите префиксированные буквы из имени класса и в идентификатор

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

Вот так ...

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

Теперь вам не нужно иметь две одинаковые функции jquery, только

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

Answer 2

Вы хотите, чтобы анимация открытия происходила после завершения анимации закрытия. Это можно сделать, обеспечив обратный вызов первой анимации:

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