Помогите с аккордеоном плиз

Есть такая штука:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
    <script>
        $(function() {
            $("#cat p").hide();
            $("#cat h4").click(function() {
                $(this).next("p").slideToggle("slow").siblings("p:visible")
.slideUp("slow");
            });
        });
</script>

<div id="cat">
  <h4><a href="#">Меню или ссылка раз</a></h4>
        <p>
            <a href="#">бла бла 1</a><br>
            <a href="#">бла бла 2</a><br>
            <a href="#">бла бла 3</a><br>
        </p>
  <h4><a href="#">Меню или ссылка два</a></h4>
        <p>
            <a href="#">тили-тили</a><br>
            <a href="#">трали-вали</a><br>
        </p>
  <h4><a href="#">Меню или ссылка три</a></h4>
        <p>
            <a href="#">это мы</a><br>
            <a href="#">не проходили</a><br>
            <a href="#">это нам</a><br>
            <a href="#">не задавали</a><br>
        </p>
</div>

Собственно она раскрывает элемент div при клике по заголовку. При этом сворачиваются все ранее открытые div'ы. А как можно это изменить так, чтобы div сворачивался не при открытии следующего дива, а при повторном клике по его заголовку?

Заранее спасибо.