带SlideToggle的div浮动

Question

I have a Wordpress Site with multiple floating div`s. behind every div is a slideToggle that open some more content.

My problem is now, that all div`s should stay in position and only the opened should expand. Now the divs switch position and all others in a row grow bigger.

html

<div>
<div class="span4">

<div class="event_head">
<div><h2>A Title</h2></div>
</div>

<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>

</div><!-- ende .span4 -->



<div class="span4">

<div class="event_head">
<div><h2>A Title</h2></div>
</div>

<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>

</div><!-- ende .span4 -->



<div class="span4">

<div class="event_head">
<div><h2>A Title</h2></div>
</div>

<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>

</div><!-- ende .span4 -->






<div class="span4">

<div class="event_head">
<div><h2>A Title</h2></div>
</div>

<div class="event_body">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
</div>

</div><!-- ende .span4 -->
</div>

css

.span4 {
    float:left; 
    margin-right: 2%;
    width: 32%;
    margin-bottom: 40px;
}

.span4{width: 32%;}
.span4:nth-child(3n) {margin-right: 0;} 

js

$(document).ready(function(){

//hide the all of the element with class msg_body
jQuery(".event_body").hide();

//toggle the componenet with class msg_body
jQuery(".event_head").click(function(){
jQuery(this).next(".event_body").slideToggle();
});


});

Here is a Fiddle of what i have so far.

fiddle

And here is an image of what i want. http://www.rhodesign.ch/slidetoggle.jpg

Answer 1

You need to create 3 cols in order to format your content.

<div class="col">
    <!-- your content for this col -->
</div>
<div class="col">
    <!-- your content for this col -->
</div>
<div class="col">
    <!-- your content for this col -->
</div>

I also cleaned your html ; you were creating way to many useless divs. Check this fiddle .

Answer 2

One solution is to use opacity:0 instead of jQuery(".event_body").hide();

css

.event_body{opacity: 0;}

and then in js:

jQuery(".event_head").click(function(){
    if($(this).next().css("opacity") == "0"){
    jQuery(this).next(".event_body").animate({
        opacity: 1
    }, 2000);
    }
    else{
         jQuery(this).next(".event_body").animate({
        opacity: 0
    }, 1000);
    }
});

fiddle