Как скрыть последующие элемент при клике

Nureke Duisekeyev

Привет мир!
Мне необходимо сделать чтобы при клике на <div class="gadget cats"> все последующие элементы скрывались под ним, и при нажатии появлялись обратно.
Я написал jQuery код, но к сожалению он не работает, ребята подскажите как мне быть ?

Вот мой HTML:

jQuery('.leftbar .gadget').on('click', function(){
   jQuery(this).find('ul.catalog').slideToggle( "slow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gadget cats">
  <h2>Каталог</h2>
  <ul class="catalog menusm">

    <li class="passive">
      <a href="/cat/325"></a>
    </li>
    <li class="passive">
      <a href="/cat/402"></a>
    </li>
    <li class="passive">
      <a href="/cat/428"></a>
    </li>
    <li class="passive">
      <a href="/cat/129"></a>
    </li>
    <li class="passive">
      <a href="/cat/304"></a>
    </li>
    <li class="passive">
      <a href="/cat/405"></a>
    </li>
    <li class="passive">
      <a href="/cat/348"></a>
    </li>
    <li class="passive">
      <a href="/cat/404"></a>
    </li>
    <li class="passive">
      <a href="/cat/44"></a>
    </li>
    <li class="active">
      <a href="/cat/133"></a>
      <ul>
        <li>
          <a href="/cat/143"></a>
        </li>
        <li>
          <a href="/cat/153"></a>
        </li>
        <li>
          <a href="/cat/146"></a>
        </li>
        <li>
          <a href="/cat/151"></a>
        </li>
        <li>
          <a href="/cat/180"></a>
        </li>
        <li>
          <a href="/cat/181"></a>
        </li>
        <li>
          <a href="/cat/178"></a>
        </li>
        <li>
          <a href="/cat/179"></a>
        </li>
        <li>
          <a href="/cat/185"></a>
        </li>
        <li>
          <a href="/cat/208"></a>
        </li>
      </ul>
    </li>
    <li class="passive">
      <a href="/cat/126"></a>
    </li>
    <li class="passive">
      <a href="/cat/315"></a>
    </li>
    <li class="passive">
      <a href="/cat/82"></a>
    </li>
    <li class="passive">
      <a href="/cat/244"></a>
    </li>
    <li class="passive">
      <a href="/cat/247"></a>
    </li>
    <li class="passive">
      <a href="/cat/142"></a>
    </li>
    <li class="passive">
      <a href="/cat/197"></a>
    </li>
    <li class="passive">
      <a href="/cat/340"></a>
    </li>
    <li class="passive">
      <a href="/cat/414"></a>
    </li>
    <li class="passive">
      <a href="/cat/416"></a>
    </li>
    <li class="passive">
      <a href="/cat/415"></a>
    </li>
    <li class="passive"><a href="/cat/425">TRX</a></li>
  </ul>
</div>
Nureke Duisekeyev 7 месяцев назадСпасибо 0
2 чел.