Hello,

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:
http://i645.photobucket.com/albums/u...1/Picture2.png

Any help would be awesome. Thanks.

Scripts:

index:

HTML Code:
<table>
    <tbody>

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

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

    </tbody>
</table>
listing.js:

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