I have a page with three rows of main information that all have a 'More Info' button attached, sort of like http://www.wefollow.com and their info button.

When the 'More Info' link is clicked a <tr> with a class of "mi" slides down above the main info.

The problem that I am getting is hiding the <tr> before the 'More Info' link is clicked. There is just a blank space where the <tr> is. The info in the <tr> is being hidden with jQuery (script below) and then displays when 'More Info' is clicked.

I tried hiding the "mi" with CSS but when the 'More Info' button is clicked, nothing happens.

here is a picture of the problem:

Any help would be awesome. Thanks.



HTML Code:

        <tr id="info-1"> </tr>
        <tr class="mi">
                <div id="1" class="more-information" />

        <tr class="">
            <td> </td>
            <td> </td>
            <td> <a id="1" class="more-info" href="#">More info</a> </td>


$(".more-info").click(function () {
var divname= this.id; $("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
return false;