
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
.hidden_data { overflow: hidden; display:none; /* <--- remove this */ padding: 10px; font-style: italic; color: #777; }â
similar problem answered
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
EmoticonEmoticon