Гармошка у которой каждый заголовок якорь
 

Как реализовать? не могу сделать.
Есть

<script type="text/javascript">

  
	$(document).ready(function(){
		$("dd:not(:first)").hide();
		$("dt a").click(function(){
			$("dd:visible").slideUp("slow");
			$(this).parent().next().slideDown("slow");
			return false;
		});
	});

  </script>

Где в теле хтмл документа
<dt><a href="">Пункт 1</a></dt>
<dd style="display: none;">
<?-- Много текста -->
</dd>
<dt><a href="">Пункт 2</a></dt>
<dd style="display: none;">
<?-- Много текста -->
</dd>
<dt><a href="">Пункт 3</a></dt>
<dd style="display: none;">
<?-- Много текста -->
</dd>
суть в том что при клики на "Пункт 1" выпадает много текста, идем вниз нажимаем на "Пункт 3", получается что "Пункт 1" сворачивается, а "Пункт 3" разворачивается но текст блока расположен по середине, одним словом не сначала. Как сделать что при клике на "Пункт 3" пользователь сразу видел Заголовок а потом текст?