Elements are jumping around after jQuery.hide()

I'm trying to create an effect similar to the accordion. However, when header 'A' is clicked to close/minimize it, the header 'B' below it moves too close to it. If you click again anywhere on the page the headers spread out again.

Here is my javascript:

        $(".accordion .head").click(function () {

            if ($(this).next().is(":visible")) {
                $(this).next().hide('fast');
                $(this).find('img').attr('src', '<%=Url.Content("~/Content/images/Arrow-Right.png")%>');
            }
            else {
                $(this).next().show('fast');
                $(this).find('img').attr('src', '<%=Url.Content("~/Content/images/Arrow-Down.png")%>');
            }
            return false;
        });

HTML looks similiar to this:

<div class=accordion>
   <h5 class=head> <img/></h5>
   <div> </div>
   <h5 class=head&g开发者_开发百科t; <img /></h5>
   <div> </div>
</div>

What can I do to stop the header elements from jumping around after hiding the div below it?

Use the css property: display:inline-block. To your header class

It seems that I have changed something (or perhaps there was a browser update) that fixed the issue.

I can't see anything that I have changed that should have fixed the problem.