Раскрывающийся (выпадающий) текст при клике на ссылку или картинку с закрытием ранее открытого

В БОШКУ ВСТАВЛЯЕМ ЭТО:

<scriptsrc="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>

Для того что бы избежать дерганий при открытии и закрытии ссылок - нужно в css прописать margin:0 для h4 (соответственно так же в head, либо в подключенном файле стилей).

А можно вообще h4 заменить на что то другое... 

<style type="text/css">
h4 {margin:0;}
</style>