jQuery hidden div / <a> onClick question

Question

Hi all!

I apologize in advance for the wording of the question...

I have a table that is being returned after an AJAX call. In the last <td> of each row is a hidden div that I have wired up to show on mouseOver and then hide again on mouseOut of a <a> link that is visible in the <td>. What I'm trying to accomplish is that if someone actually clicks the link then box will stay put until the user clicks the div again. Here's what I have:

function showDiv() {
           $("#getTable > tbody > tr:gt(0)").each(function(index) {
               //grab last td of each row after header row
               var row = $(this);
               var td = row.find("td:last");
               var a = row.find("td:last > a");



               $(a).mouseover(function() {
                   //show div
                   var d = $(this).next();
                   d.show('slow');
               });

               $(a).mouseout(function() {
                   //show div
                   var d = $(this).next();
                   d.hide('normal');
               });

               $(a).click(function() {
                   var d = $(this).next();
                   d.show('slow');
                     d.click(function() {
                    $(this).hide('normal');
                    });
                  });

           });

       }

I think I'm in the right direction, however clicking the link springs the page to the top, which I know has to do with a return false that needs to be dropped in there somewhere, but the div isn't staying. I'm thinking that the div may be staying but the mouseOut function is firing as I move away from clicking the <a>.

As always, I thank the brilliant members of stackoverflow in advance for any and all help!!!

Here's markup of the table row just in case it helps at all:

  <tr><td>102.89</td><td>12/14/2009</td><td>GA00427424      </td><td>ACHCBLUE CROSS B</td><td>061000104</td><td><a href="#">View Matches</a><div class="hideMe" style="display: none;"><span>ELECBCBS 121509 1366, $103.0000</span><br><span>CPO 121709 1383, $103.0000</span><br><span>C121809MJM2 LB 9060, $103.0000</span><br><span>C122809MM10 LR 9110, $103.0000</span><br></div></td></tr>

Answer 1

I think that you will have to return "false" from the click function to prevent the navigation.

Answer 2

You should have a global variable that indicates whether the a should be shown or not. onmouseout should only hide the div if it should not be shown:

var show = Array();
function showDiv() {
  $("#getTable > tbody > tr:gt(0)").each(function(index) {

     show[index] = false;
     // your stuff

     $(a).mouseout(function() {
          //show div
          if(!show[index]) {
              var d = $(this).next();
              d.hide('normal');
          }
     });

     $(a).click(function() {
          var d = $(this).next();
          if(d.is(':visible')) {
             show[index] = false;
             d.hide('normal');
          }
          else { 
             show[index] = true;
             d.show('slow');
          }
          return false;             
    });

  });
}

Notice that I also changed the click function in a way that you don't assign a new click handler every time. The return false; should keep the page from going to the top.