Bootstrap: How to collapse a wrapper div without jumping?

Question

I would like to collapse and show two columns when clicking a link.

I wrapped two columns in div, which has the identifier referenced by the link in the column above it. The first column occupies the entire width of the page, and the second and third should separate the page or stack. All three columns are wrapped in div.row, and the rows repeat the page.

Collapse animation seems to work for lines with a border. However, the opening transition jumps back. If I delete the border in the row and click on the link, there is a delay before two columns immediately appear.

I want none of these things to happen. I need a smooth transition showing two columns when a link is clicked. How can i do this?

<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

! ​​, ( Bootstrap , ). div , , - (!?)

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

div.details - div, . . JSFiddle.

Answer 2

JSFiddle , , , .

, , , .