Toggle hidden row with button using jQuery

I have a table where each visible row has a row beneath it whose visibility can be toggled by pressing a button. A live demo of this can be found here. I'm really new to using jQuery and the problem I'm encountering is probably a simple fix to be honest. First of all, I want the togglable rows to be hidden by default and only shown when the button is clicked (now they show when the page is loaded). How can I do this? To hide the rows I have the following: $(document).ready(function(){ $("#button1").click(function(){ $(".trhideclass1").toggle(); }); }); $(document).ready(function(){ $("#button2").click(function(){ $(".trhideclass2").toggle(); }); }); I don't want to have to create a function for every button separately, so what is a better way to do this? My idea was to give a <button> and <tr> the same id and somehow make the button only toggle stuff with the same id, is this possible?