Bootstrap: How to collapse a wrapper div without jumping?

Question

I'd like to collapse and show two columns when a link is clicked.

I've wrapped the two columns in a div , which has an id referenced by the link in the column above it. The first column takes the full width of the page, and the second and third should split the page or stack. All three columns are wrapped in a div.row , and the rows repeat down the page.

It seems that the collapse animation works for rows that have a border. However, the opening transition "jumps" back up. If I remove the border on the row and click on the link, there is a delay before the two columns just abruptly appear.

I want neither of these things to happen. I'd like a smooth transition revealing the two columns when the link is clicked. How can I make that 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 with 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 .

Answer 1

Got it! The wrapper div needs to be set so that its height equals the maximum height of its children (so Bootstrap knows how much to expand). From Make outer div be automatically the same height as its floating content , this somehow works (!?)

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

where div.details is the wrapper div containing the two columns. See the JSFiddle .

Answer 2

In the JSFiddle you provided the two behave exactly the same way, they open and then the content appers.

The only difference is that you don't see it opening in the second one because it's white on white, try adding a border or a background to it.