hide table body by default

hide table body by default

Hello,

I'm trying to hide the table body of all tables on my html page. By default they are shown, but I want them hidden. Since the ID for each table on my html page will differ, I need some way to collapse them all on pageload, because all I can seem to manage is to have them expanded by default. Any help is appreciated.

javascript:
  1. function togglePanelMore(id, source) {
  2. var viewContainer = $(id);
  3. if ($(source).html() == "showrows") {
  4. $(source).html("hiderows");
  5. viewContainer.show();
  6. }
  7. else {
  8. $(source).html("showrows");
  9. viewContainer.hide();
  10. }
  11. }

html:
  1. <table summary="example" id="box-table-a">
  2.   <thead>
  3.     <tr>
  4.       <th scope="col" colspan="2"><a href="javascript:togglePanelMore('#row01', '#togglerow01')" id="togglerow01">hiderows</a></th>
  5.     </tr>
  6.   </thead>
  7.   <tbody id="row01">
  8.     <tr>
  9.       <td>Telefoonnummer</td>
  10.       <td>011 23 45 67</td>
  11.     </tr>
  12.     <tr>
  13.       <td>Faxnummer</td>
  14.       <td>011 23 45 68</td>
  15.     </tr>
  16.     <tr>
  17.       <td>E-mailadres</td>
  18.       <td>info@someaddress.com</td>
  19.     </tr>
  20.     <tr>
  21.       <td>Website</td>
  22.       <td>www.someaddress.com</td>
  23.     </tr>
  24.   </tbody>
  25. </table>