Show/hide not working properly with jquery

[spyderfusion02]

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:

<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:

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

[Jeff Mott]

I see two problems in the markup. First, IDs must be unique. That means no two elements can have the same ID. And the second is that IDs cannot begin with a number. They must begin with a letter or underscore.

[spyderfusion02]

I see two problems in the markup. First, IDs must be unique. That means no two elements can have the same ID. And the second is that IDs cannot begin with a number. They must begin with a letter or underscore.

Alright, I changed all id's to something unique and none are starting with numbers but it is still not working properly.

[Jeff Mott]

Can you link to or attach the full page you're working with now?

[spyderfusion02]

The files are on the localhost so I will post the files here.

main file(function is called in the html page in an 'output-listings' div)
buy.function.php:

<?php
function outputListingsTable()
{
    $mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead');
    $result = $mysql->query("SELECT * FROM explore") or die($mysql->error);

    if($result) 
    {
        echo "<div class=\"main-info\"> \n";
            echo "<table class=\"listings\"> \n";
                echo "<tbody>";
        
                    while($row = $result->fetch_object()) 
                    {
                        $id = $row->id;
                        $siteName = $row->site_name;
                        $siteDescription = $row->site_description;
                        $siteURL = $row->site_url;
                        $sitePrice = $row->site_price;
        
            
                        echo "        <tr id=\"info-" .$id. "\"> \n";
                                        echo "<tr class=\"mi\"><td><div id=\"more-" .$id. "\" class=\"more-information\"> \n";
                                        echo "</div></td></tr> \n";
                        echo "         <td>" . $siteName . "</td> \n";
                        echo "        <td>" . $siteURL . "</td> \n";
                        echo "        <td><a id=\"" . $id . "\" class=\"more-info\" href=\"#\">More info</a></td> \n";    
                        echo "        </tr>";
                    }
        echo "</tbody>";
    echo "</table> \n";
echo "</div> \n";            

    }

}

?>

listing.js:

$(function(){
	$("tr").hover(function(){
		$(this).addClass("hover");
	}, function() {
		$(this).removeClass("hover");
	});
	$(function() {
	$("a.more-info").click(function() {
	$("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
	return false;
	});
});


});

style.css:

tr.hover td { background: #FDFFE7; }
	table { border-collapse:collapse;
			color:#3F3F3F;
			font-family:arial,helvetica,sans-serif;
			border-top:1px solid #DFDFDF;
		  }
td.more-information { padding: 0px; }

div.more-information { display: none; }

[Jeff Mott]

The PHP code doesn't do us any good because this issue is at the front-end. Can you view your page, then view the source and paste that source here in a code block?