javascript - slideToggle with 2 column layout -

i have 2 column layout this:

http://jsfiddle.net/mdaev/

the css:

html, body {     width: 100%;     height: 100%; }  .columns {     width: 97%;  }  .column-12-12 {      width: 97%; }  .image-series {     max-width: 250px;     display:inline-block;  }  .image {     background-color: blue;     width: 245px;     height: 100px; }  .content {     display:none;  } 

when click on "how works", makes element next slide down well... want stay put , have actual element toggled slide down. can me out , post jsfiddle solution?

thanks!

try adding vertical-align: top; .image-series class.

demo

to want, think need specify columns. quick , dirty example:

<div>     <div class="columns">         <div class="column-12-12">             <div class="col">                 <div class="image-series">                     <div class="image"></div>                     <div class="how-it-works">                         <hr/>how works <span class="plus">+</span>                          <hr/>                         <div class="content">djjsd jdksaljds djskadjskad jkdsad jkdlsad jkdsadj jkdsad jkdlsad jkdlsad jkdlsad jkdlsad</div>                     </div>                 </div>                 <div class="image-series">                     <div class="image"></div>                     <div class="how-it-works">                         <hr/>how works <span class="plus">+</span>                          <hr/>                         <div class="content">djjsd jdksaljds djskadjskad jkdsad jkdlsad jkdsadj jkdsad jkdlsad jkdlsad jkdlsad jkdlsad</div>                     </div>                 </div>             </div>             <div class="col">                 <div class="image-series">                     <div class="image"></div>                     <div class="how-it-works">                         <hr/>how works <span class="plus">+</span>                          <hr/>                         <div class="content">djjsd jdksaljds djskadjskad jkdsad jkdlsad jkdsadj jkdsad jkdlsad jkdlsad jkdlsad jkdlsad</div>                     </div>                 </div>                 <div class="image-series">                     <div class="image"></div>                     <div class="how-it-works">                         <hr/>how works <span class="plus">+</span>                          <hr/>                         <div class="content">djjsd jdksaljds djskadjskad jkdsad jkdlsad jkdsadj jkdsad jkdlsad jkdlsad jkdlsad jkdlsad</div>                     </div>                 </div>             </div>         </div>     </div> </div> 

css add:

.col {     display:inline-block;     width:48%;     vertical-align:top; } 

demo

on side note i'd avoid using <hr /> tags when use borders insted. more semantic mark be:

<div class="how-it-works">     <h2>how works <span class="plus">+</span></h2>                 <div class="content">djjsd jdksaljds djskadjskad jkdsad jkdlsad jkdsadj jkdsad jkdlsad jkdlsad jkdlsad jkdlsad</div> </div> 

and style h2

.how-it-works h2 {     font-size:1em;     font-weight:normal;     border-top: 2px groove;     border-bottom: 2px groove;     padding:0.75em 0; } 

demo