Hello guys. I have this code (simplizied and without irrelevant here <th><tbody> etc. code): <table> <tr class="section_head"> <td>name</td> <td>value</td> </tr> <tr> <td colespan="2"><div>some stuff....</div></td> </tr> </table>
I want to "show/hide" non-classed tr when clicking on "section_head" table row. $(document).ready(function() { $('.section_head').click(function(){ $(this).next().toggle(); }); }); This works and everything is fine. BUT! To make it as requested in design I need all toggled stuff to be "hidden" when page is opening. To achieve that I give my tr (display:none;) from css. And in the same time I want the page to degrade gracefully, so when javascript is off usually "hidden" stuff will be shown. So I can't load the page with tr (display:none;) and I need to hide it with javascript; So what I do is: $(document).ready(function() { $('.section_head').each(function(){ $(this).next().toggle(); }); $('.section_head').click(function(){ $(this).next().toggle(); }); }); But then I get this “jumping”. When page loads trs are open, then it jumps and closes it. Does anybody knows some graceful solution for whole problem?