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

Еще один вариант раскрывающегося меню/блока с текстом, альтернатива этому варианту.
Происходит открытие скрытого текста/ссылок при клике на основную ссылку и закрытие открытого при клике на другую основную ссылку. Сам не понял че написал
Что из себя представляет смотрим тут

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

<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> 	

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

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

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