Why does this line 'jump' when I call slideDown?

Question

Since there's a lot of code, I won't post it here. Rather, you can find it all here. That way you can play around with it and run it:

function P_Expand(item_id) {
  $('#p_' + item_id).slideToggle();
}

.data_table {
  width: 650px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}
.data_table tbody th {
  border-bottom: 1px solid #555;
  text-align: left;
}
.data_table tbody tr td a {
  color: #8b9cb0;
  text-decoration: none;
}
.hidden_data {
  display: none;
  padding: 10px;
  font-style: italic;
  color: #777;
}

<table class='data_table'>
  <tbody>
    <tr>
      <td>
        <a href='javascript:void(0)' onclick='P_Expand(9)'>Drop me down!</a>
      </td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td colspan='3' style='background-color: #eee'>
        <div id='p_9' class='hidden_data'>
          <p style="margin: 0px;">Donec dolor urna, vehicula in elementum eget, auctor dignissim nibh. Morbi et augue et nisi.</p>
        </div>
      </td>
    </tr>
    <tr>
      <td>Line number 2...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

The problem happens when the 'Drop me down!' link is clicked. The DIV slides down as expected, but makes a sudden 'jump' right at the end.

Why does it do this, and how can I make it go away?

score 23 · Answer 1 · answered Aug 24 '10 at 04:58

23

Actually you don't need any of this. Just give your hidden element a width:

.hidden_data {
    display: none;
    padding: 10px;
    font-style: italic;
    color: #777;
    width: 300px;
}

It will just works!

PS: I spent all the weekend on this...

answered Aug 24 '10 at 04:58

Victor Teixeira

291
1
2

2

Simple solution! I need to set overflow:hidden; aswell, tnx! – DownDown Apr 23 '13 at 22:17

score 12 · Accepted Answer · edited Jun 20 '20 at 09:12

12

demo

codes link

.hidden_data {
    overflow: hidden;
    display:none; /* <--- remove this */
    padding: 10px;
    font-style: italic;
    color: #777;
}

similar problem answered

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 27 '10 at 05:59

Reigel Gallarde

64,198
21
121
139

Yes! It works! So the problem is that it needs to have an explicit height set beforehand? – Nathan Osman Jul 27 '10 at 06:06
yeap!.. that's the problem... ;) – Reigel Gallarde Jul 27 '10 at 06:06
Wish I could give you +2 :) Thanks a million! – Nathan Osman Jul 27 '10 at 06:14

hookedonwinter · Answer 3 · 2010-07-27T06:03:42.267

0

Give the hidden div a set height. jsfiddle

Edit. Found some answers here. You can store the height of each element, and then reapply it. Not ideal for your situation, but maybe a starting point

edited Jul 27 '10 at 06:03

answered Jul 27 '10 at 05:48

hookedonwinter

12,436
19
61
74

But what if the content changes and it no longer fits on the line? The snippet in my example is part of a larger page that has lots of those lines and they're not guaranteed to be one-liners. – Nathan Osman Jul 27 '10 at 05:56
Whoa, don't use min-height. That's just funky.. Trying other options now. – hookedonwinter Jul 27 '10 at 05:59

Why does this line 'jump' when I call slideDown?

3 Answers3

demo