Как показывать и скрывать субменю при клике?

Question

[constant_in]

Подскажите пожалуйста как на jquery сделать так, что бы когда нажимаешь на пункт меню открывалось субменю, а когда на другой пункт оно закрывалось и открывался следующий. Как я понял то transition не работает с display: block; И нужен show/hiden что бы его анимировать. Подскажите пожалуйста, а то в js ещё слабо понимаю. Может есть примеры которые бы мог разобрать что угодно.

<ul class="menu">
    <li class="menu-item children">
        <a href="">Текст</a>
        <ul class="sub-menu">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
    <li class="menu-item">
        <a href="">Текст</a>
    </li>
    <li class="menu-item children">
        <a href="">Текст</a>
        <ul class="sub-menu">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
</ul>