[jQuery] Toggling that degrades gracefully

[gryzzly]

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?