JQuery toggleclass 2 дивы - открыт один и закрыть другой

Question

У меня есть 2 Див о том, что я открываю с toggleClass, как показано ниже:

<!-- links to open div's --> 
<div class="sort-filter"> 
    <div class="sort"> 
    <a href="#" class="sort"><em class="fa fa-sort"></em> SORT</a> 
    </div> 
    <div class="filter"> 
    <a href="#" class="filter"><em class="fa fa-filter"></em> FILTER</a> 
    </div> 
</div> 

<!-- divs to toggle open/close --> 
<div class="search-options clearfix" style="display: none;"> 
    content options here 
</div> 
<div class="search-filters clearfix" style="display: none;"> 
    content filters here 
</div> 

Я использую следующие JQuery для переключения Див'S:

<script type="text/javascript"> 
$(function ($) { 
    var search_options = $('.search-options'); 
    $('a.sort').click(function() { 
     $(this).toggleClass('show'); 
     search_options.slideToggle(400); 
     if (!$(this).hasClass('show')) { 
      $('a.filter').removeClass('show'); // hide the other one 
     } 
     return false; 
    }); 
    var search_filters = $('.search-filters'); 
    $('a.filter').click(function() { 
     $(this).toggleClass('show'); 
     search_filters.slideToggle(400); 
     if (!$(this).hasClass('show')) { 
      $('a.sort').removeClass('show'); // hide the other one 
     } 
     return false; 
    }); 
}); 
</script> 

Но моя логика ввернута.

Я хочу одну ссылку, чтобы закрыть другой div, если открыт & vise-versa.

Любые идеи?

jsfiddle here...

Answer 1

Ваш текущий код удаляет шоу флаг из тумблера, но это не делает ничего, чтобы фактически скрыть область содержимого. Вы можете добавить slideUp(), чтобы сделать это:

$(function ($) { 
    var search_options = $('.search-options'); 
    $('a.sort').click(function() { 
     $(this).toggleClass('show'); 
     search_options.slideToggle(400); 
     if ($(this).hasClass('show')) { 
      $('a.filter').removeClass('show'); // mark the other as hidden 
      search_filters.slideUp(400); // hide the other one 
     } 
     return false; 
    }); 
    var search_filters = $('.search-filters'); 
    $('a.filter').click(function() { 
     $(this).toggleClass('show'); 
     search_filters.slideToggle(400); 
     if ($(this).hasClass('show')) { 
      $('a.sort').removeClass('show'); // mark the other as hidden 
      search_options.slideUp(400); // hide the other one 
     } 
     return false; 
    }); 
}); 

Вот скрипку: http://jsfiddle.net/yj9f5qh8/