javascript - 同じ行の他の要素に影響を与えずに非表示の div を下にスライドさせる方法

Question

画像のグリッドがあります。誰かが画像にカーソルを合わせると、関連するテキストがその画像がある行の下にドロップダウンし、次の行を押し下げます。

現在、同じ行の他の画像もドロップダウンしています。どうすればそれらを静止させることができますか?

これが私のコードですが、ここで実際に動作しているのを見ることができます: http://jsfiddle.net/VtvG8/

CSS

        #cook-it-raw-container{
            margin: 0px auto; 
            width: 980px; 
            font-family: Dax,Helvetica,Arial,sans-serif; 
            position: relative;
            color: #000;
        }


        #cook-it-raw-container div.sidebar{
            display: inline-block;
            vertical-align: top;
            width: 488px;
        }

        img.chef-pic{
            width: 129px;
            height: 120px;
            display: inline-block;
            margin: 8px;
            cursor: pointer;
        }


        div#sidebar-chefs div.chef-story{
        width: 454px;
        font-size: 13px;
        margin: 10px 0;
        position: relative;
        left: 0;
        display: none;
        }

HTML

        <img class="chef-pic" src="lp_cookitraw_sidebarA_02.jpg" border="0" alt="Albert Adrià" height="118" width="136" />
        <div class="chef-story">
        <h3>Albert Adrià</h3>
        <h4>Tickets, 41°, Barcelona, Spain</h4>
        <p>From working with older brother, Ferran Adrià, at the iconic elBulli restaurant, to maintaining his kingdom of culinary innovation with an ever-expanding empire of new restaurants in Barcelona, Adrià’s bold ideas continue to advance modernist Spanish gastronomy.</p>
        </div>

        <img class="chef-pic" src="lp_cookitraw_sidebarA_14.jpg" border="0" alt="dan barber" height="117" width="135" />
        <div class="chef-story">
        <h3>dan barber</h3>
        <h4>Blue Hill at Stone Barns, New York</h4>
        <p>Chef, writer, educator, and fierce advocate for better choices in sustainable agriculture, Dan Barber is a creative and culinary force in pursuit of nurturing what nurtures us.</p>
        </div>

JQUERY $(document).ready(function(){

            $("img.chef-pic").mouseenter(function(){
                        $(this).next(".chef-story").slideToggle();  
                    });
            $("img.chef-pic").mouseleave(function(){
                        $(this).next(".chef-story").slideToggle();  
                    });

        });

絶対位置について考えましたが、下の行はドロップダウンしません。次の行も押し下げたいと思います。SO と Google を検索しましたが、この特定の状況に役立つものは見つかりません。返信ありがとうございます。