Tutorial :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?

Solution:1

demo

codes link

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

Solution:2

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...

Solution:3

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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com