Вопрос создания меню Jquery

Question

Я создаю простой скрипт с использованием jquery, когда пользователь нажимает на ссылку, которая скользит вниз.Как я могу автоматически закрыть / сдвинуть другие списки, которые уже расширились, когда я нажимаю на другие списки, чтобы скользить вниз.

т.е. когда один блок сдвигается вниз, если любой другой, который может быть открыт, должен скользить вверх.Может кто-нибудь показать мне шаг за шагом, как это сделать?

спасибо

  $(document).ready(function() {
  $('.menu ul').hide();
  $('.menu .arrowUp').click(function() {
  $(this).find(".third-level").toggle();
  });
});

<ul class="menu">
<li class="arrowUp"><a href="#">link1</a>
    <ul class="third-level" >             
    <!-- third level non-active -->
     <li class="arrowUp"><a href="/view/page/bache/16425">Some Link</a></li>
    </ul>
</li>
<li class="arrowUp"><a href="#">link2</a>
    <ul class="third-level" >             
    <!-- third level non-active -->
     <li class="arrowUp"><a href="/view/page/bache/16425">some Links 2</a></li>
    </ul>
 </li>
<li class="arrowUp"><a href="#">link3</a>
                                    <ul class="third-level" >
                                      <!-- third level non-active -->
                                      <li class="arrowUp"><a href="/view/page/bache/16417">Agricultural Commodities</a></li>
                                        <!-- third level non-active -->
                                      <li class="arrowUp"><a href="/view/page/bache/16418">Sugar</a></li>
                                     <!-- third level non-active -->
                                      <li class="arrowUp"><a href="/view/page/bache/16419">Coffee</a></li>
                                      <!-- third level non-active -->
                                      <li class="arrowUp"><a href="/view/page/bache/16420">Energy</a></li>
                                      <!-- third level non-active -->
                                      <li class="arrowUp"><a href="/view/page/bache/16421">Financials</a></li>
                                    </ul>
</li>
<li class="arrowUp"><a href="#">link4</a></li>
<li class="arrowUp"><a href="#">link5</a></li>
<li class="arrowUp"><a href="#">link6</a></li>
</ul>

Answer 1

Вам просто нужно снова спрятать их, прежде чем переключать тот, который вы хотите

$(document).ready(function() {
  $('.menu ul').hide();
  $('.menu .arrowUp').click(function() {
      $('.menu ul').hide();
      $(this).find(".third-level").toggle();
  });
});

Answer 2

Я знаю, что только что прокомментировал, но я мог бы также опубликовать в качестве ответа:

Не беспокойтесь об изобретении колеса:

вы можете использовать jQuery UI аккордеон .