Hiding table rows using jquery, simplifying function
<p>Currently I'm trying to hide some table rows and have a toggle link that shows and hides them when the link is clicked. Now currently I have it working but I was wondering if there's an easier way to make the function totally generic instead of copy and pasting a bunch of the same code with just different class names (or IDs). From what I understand of JS/Jquery (this is the first time I've done JS/JQuery, I'm usually a back-end developer) it looks like using a table probably isn't the wisest idea but I'm modifying original code. I'll rewrite it if I have to to use something other than tables but I just need some direction if it's not possible</p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;th&gt;Some stuff&lt;/th&gt;
        &lt;a href="#" class="hide link1"&gt;Show/Hide&lt;/a&gt;
    &lt;/tr&gt;
    &lt;tr class="show hide row1"&gt;
        &lt;th&gt;Random data&lt;/th&gt;
    &lt;/tr&gt;
        &lt;tr&gt;
        &lt;th&gt;Some stuff2&lt;/th&gt;
        &lt;a href="#" class="hide link2"&gt;Show/Hide&lt;/a&gt;
    &lt;/tr&gt;
    &lt;tr class="show hide row2"&gt;
        &lt;th&gt;Random data2&lt;/th&gt;
    &lt;/tr&gt;
        &lt;tr&gt;
        &lt;th&gt;Some stuff3&lt;/th&gt;
        &lt;a href="#" class="hide link3"&gt;Show/Hide&lt;/a&gt;
    &lt;/tr&gt;
    &lt;tr class="show hide row3"&gt;
        &lt;th&gt;Random data3&lt;/th&gt;
&lt;/table&gt;

&lt;script&gt;
    $(".hide link1").click(function(){
        $(".show hide row 1").toggle(400)
    });
    $(".show hide row 2").hide()
    $(".hide link2").click(function(){
        $(".show hide row 2").toggle(400)
    });
    $(".show hide row 2").hide()
    $(".hide link3").click(function(){
        $(".show hide row3").toggle(400)
    });
    $(".show hide row3").hide()
&lt;/script&gt;
</code></pre>
