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.

score 12 · Accepted Answer · edited May 23 '17 at 12:00

12

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.

edited May 23 '17 at 12:00

Community

1
1

answered Jul 21 '15 at 02:23

Qrtn

794
6
17

3

Finally something that actually works on this issue. Thank you very much. – Marco Aurélio Deleu Jun 24 '16 at 22:25

score 0 · Answer 2 · answered Jul 21 '15 at 00:38

0

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.

answered Jul 21 '15 at 00:38

seg-s

55
3

Oh, I see! Do you have any idea how to make the animation occur without jumping? – Qrtn Jul 21 '15 at 01:41
You can either add a border, a background or override the css with your own css animations. – seg-s Jul 21 '15 at 01:52
What I mean is that when you click the link with the border, the border jumps upward instead of stopping at the height of the taller column. – Qrtn Jul 21 '15 at 01:59
Sorry, i'm not sure i understand correctly, is this behaviour notable on the JSFiddle? and what do you mean by : " the border jumps upward instead of stopping at the height of the taller column"? – seg-s Jul 21 '15 at 02:11
See my answer; that effect is what I was trying to achieve. – Qrtn Jul 21 '15 at 02:25
1

Oh ok, glad you found it! :) – seg-s Jul 21 '15 at 02:30

Bootstrap: How to collapse a wrapper div without jumping?

2 Answers2