javascript - jquery expand table not starting as hidden -

i trying make expandable table, many rows have button can press toggle child row each row. seems functioning want begin child row closed. how can this?

$(document).ready(function() {    $('.rowtoclick').click(function() {      $(this).nextall('tr').each(function() {        if ($(this).is('.rowtoclick')) {          return false;        }        $(this).toggle();      });    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>      <table border=0>    <tr class="rowtoclick">      <td><button>+</button></td>      <td>hello</td>    </tr>      <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>  </table>    <table border=0>    <tr class="rowtoclick"><button>+</button></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>  </table>    <table border=0>    <tr class="rowtoclick"><button>+</button></tr>    <tr><td>data row 1 goes here...</td></tr>    <tr><td>data row 2 goes here...</td></tr>    <tr><td>data row 3 goes here...</td></tr>    <tr><td>data row 4 goes here...</td></tr>    <tr><td>data row 5 goes here...</td></tr>  </table>

just add row in jquery

$('.rowtoclick').nextall('tr').toggle(); 

and put rowname in same td button

<td><button>+</button> row 1</td> 

so looks like

$(document).ready(function() {    $('.rowtoclick').nextall('tr').toggle();    $('.rowtoclick').click(function() {      $(this).nextall('tr').each(function() {        if ($(this).is('.rowtoclick')) {          return false;        }        $(this).toggle();      });    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>      <table border=0>    <tr class="rowtoclick"><td><button>+</button> row 1</td></tr>      <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>  </table>    <table border=0>    <tr class="rowtoclick"><td><button>+</button> row 2</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>    <tr><td class="additionalrow">data row 1 goes here...</td></tr>  </table>    <table border=0>    <tr class="rowtoclick"><td><button>+</button> row 3</td></tr>    <tr><td>data row 1 goes here...</td></tr>    <tr><td>data row 2 goes here...</td></tr>    <tr><td>data row 3 goes here...</td></tr>    <tr><td>data row 4 goes here...</td></tr>    <tr><td>data row 5 goes here...</td></tr>  </table>