javascript - Bootstrap: How to collapse a wrapper div without jumping? -

i'd collapse , show 2 columns when link clicked.

i've wrapped 2 columns in div, has id referenced link in column above it. first column takes full width of page, , second , third should split page or stack. 3 columns wrapped in div.row, , rows repeat down page.

it seems collapse animation works rows have border. however, opening transition "jumps" up. if remove border on row , click on link, there delay before 2 columns abruptly appear.

i want neither of these things happen. i'd smooth transition revealing 2 columns when link clicked. how can make happen?

<div class='container'>   <div class='row' style='border-bottom: 1px solid #ddd;'>     <div class='col-xs-12'>       <a data-toggle='collapse' href='#details1'>open or close details</a>     </div>     <div class='collapse' id='details1'>       <div class='col-sm-6'>         <table class='table table-bordered table-condensed'>           <tr>             <td>hello</td>             <td>world</td>           </tr>         </table>       </div>       <div class='col-sm-6'>         <b>hello world</b>       </div>     </div>   </div>    <div class='row'>     <div class='col-xs-12'>       <a data-toggle='collapse' href='#details2'>open or close details (row no border)</a>     </div>     <div class='collapse' id='details2'>       <div class='col-sm-6'>         <table class='table table-bordered table-condensed'>           <tr>             <td>hello</td>             <td>world</td>           </tr>         </table>       </div>       <div class='col-sm-6'>         <b>hello world</b>       </div>     </div>   </div> </div> 

jsfiddle.

got it! wrapper div needs set height equals maximum height of children (so bootstrap knows how expand). make outer div automatically same height floating content, somehow works (!?)

.details {     overflow: hidden;     clear: both; } 

where div.details wrapper div containing 2 columns. see jsfiddle.