[jQuery] SlideUp / SlideDown Toggle Issue

[jQuery] SlideUp / SlideDown Toggle Issue


I'm trying to make the utility sections (e.g. "Downloads" and "Site
Statistics") slide up/down when you click on each section's respective
header. In all of the browsers that I've tested (Opera 9.51, IE 7,
Safari 3.1.2, Firefox 3.0.1, Firefox 2) you have to click on each
header to *initialize it* and then it will work as intended (i.e.
toggling with one mouse click).
While I was testing, I found that if I remove the "siblings" it works
without the *initialization*.
Any help would be greatly appreciated. THX.
Test Page:
http://markschamel.com/index.rev2.html
XHTML:
<div id="downloads" class="item">
    <h3>Downloads</h3>
    <h4>R&eacute;sum&eacute;</h4>
    <ul class="files">
        <li class="pdf"><a href="/data/resume_07.24.08.pdf" title="Portable
Document Format">Portable Document Format (PDF)</a></li>
        <li class="odf"><a href="/data/resume_07.24.08.odf" title="Open
Document Format">Open Document Format (ODF)</a></li>
        <li class="word"><a href="/data/resume_07.24.08.doc"
title="Microsoft Word">Microsoft Word</a></li>
    </ul>
</div>
JavaScript:
$("#utility .item h3").toggle(
    function(){
        $(this).siblings().slideDown(500);
    },
    function(){
        $(this).siblings().slideUp(500);
    }
);