Toggle row using button below it in a table

Toggle row using button below it in a table

Hi,
 
I cant seem to get this to work.
 
I have 2 rows in a table, the first containing a paragraph of content and the second containing a button. I want it so when the page loads the first row (paragraph) is hidden until the user clicks on the button, which will then display the paragraph (toggle on and off).
 
If the rows are swapped round so paragraph below and button on top this piece of code works fine but for the way I need it, it doesnt.
 
  1. <!DOCTYPE HTML>
    <html>
      <head>    
        <title>Testing Horizontal Accordion</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".sectionhead").toggle(
            function() {
                    $(this).next("tr.child").hide();
            },
            function() {
                    $(this).next("tr.child").show();
            }
        )
    });
    </script>
      </head>
      <body>
    <table>
    <tr class="child"><td>Paragraph</td></tr>
    <tr class="sectionhead"><td><img src="about-us-jquery.jpg" class="btn-slide"></td></tr>
    </table>
      </body>
    </html>