hide/show not working properly with jquery

Question

I have a page with three rows of main information that all have a 'More Info' button attached, sort of like 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.

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;
});

Answer 1

First problem is you're repeating IDs. They need to be unique. That's no doubt throwing off your code.

<table>
<tbody>
  <tr id="info-1"> </tr>
  <tr class="mi">
    <td><div id="more-1" class="more-information">More information</div></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td><a id="1" class="more-info" href="#">More info</a></td>
  </tr>
</tbody>
</table>

combined with:

$(function() {
  $("a.more-info").click(function() {
    $("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
  });
});

Not sure why you need to hide siblings in the above though.

Also, I wouldn't hide the "more-information" divs in jquery. Just add CSS for that:

div.more-information { display: none; }

Answer 2

You are hiding the more-information div but you are not hiding its parent element, the <tr> with class mi . Try putting the id attribute in the <tr> instead of the enclosed div, and hiding the whole row. Also, you'll have to take cletus' advice about not repeating id's and unnecessary sibling hiding.