CODEWITHSUNDEEP
javascriptjqueryhtmlcssslidetoggle
surfbird0713
surfbird0713

Reputation: 1219

How to make hidden div slide down without affecting other elements in same row

I have a grid of images. When someone hovers over an image, I would like the correlated text to drop down under the row that image is in, and push the next row down.

Currently, the other images in the same row also drop down. How can I make them stay still?

Here is my code, but it is you can see it in action here: 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();  
                    });

        });

I thought about position absolute, but then the row below will not drop down; I would like for the next row to be pushed down too. I have searched SO and Google but can't find anything that helps in this particular situation. Thanks in advance for your replies.

Upvotes: 0

Views: 1159

Answers (1)

Manish
Manish

Reputation: 1447

Use float:left in 

div#sidebar-chefs div.chef-story{}

Jsfiddle http://jsfiddle.net/VtvG8/3/

Upvotes: 4

Related Questions