jQuery.hide（）の後に要素がジャンプしています

Question

私はアコーディオンと似たようなエフェクトを作成しようとしています。ただし、ヘッダー 'A'をクリックして閉じる/最小化すると、その下のヘッダー 'B'があまりにも近くに移動します。ページ上のどこかを再度クリックすると、ヘッダーが再び広がります。

 $(".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はこれに似なります：ここで

は私のjavascriptのです

<div class=accordion> 
    <h5 class=head> <img/></h5> 
    <div> </div> 
    <h5 class=head> <img /></h5> 
    <div> </div> 
</div> 

私はそれ以下のdivを非表示にした後、周りのジャンプからのヘッダ要素を停止するために何ができますか？

Answer 1

私は問題を修正した何かを（またはおそらくブラウザの更新があった）変更したようです。

問題が修正されているはずの変更が表示されません。

Answer 2

cssプロパティー：display：inline-blockを使用してください。あなたのヘッダークラ​​スに