Question

Update: the links now work, but the arrows are still problematic.

I’m working on http://www.boulderdispensaries.com/

Below the map, if you click on a row, you see the row below it appear. Even if you click a link in a row. Also, if you click a row, then click the row above, the right arrow doesn’t turn down. How can I fix it so clicking a link in a row goes to the link, and the arrows function properly?

For the fiddlers: http://jsfiddle.net/yFkNf/

I have also pasted the code below.

jQuery:

$(document).ready(function() {

  var hideText='<img src="arrow-down.gif" width="10" height="10" border="0" alt="v">';
  var showText='<img src="arrow-right.gif" width="10" height="10" border="0" alt=">">';
  var is_visible = false;

  $('tr:odd td').addClass('expand');
    // this is the hack I was using to get the links to work, but then the bind doesn't
//  $('tr:odd td:nth-child(1)').removeClass('expand');
//  $('tr:odd td:nth-child(2)').removeClass('expand');
//  $('tr:odd td:nth-child(4)').removeClass('expand');
  $('tr:odd td:first-child').prepend('<a href="#" class="toggleLink">'+showText+'</a> &nbsp;');

  $('.toggle').hide();

  $('a.toggleLink').click(function() {
      is_visible = !is_visible;
      $(this).html( (!is_visible) ? showText : hideText);
      $(this).parent().parent().next('tr').toggle();
      return false;
  });

  $('.expand').click(function(){
      is_visible = !is_visible;
      $(this).parent().find('a.toggleLink').html( (!is_visible) ? showText : hideText);
      $(this).parent().next('tr').toggle();
      return false;
  });

});

Here’s the format of every two rows:

<tr>
  <td><a href="http://www.boulderkindcare.org/">Boulder Kind Care</a></td>
  <td><a href="http://maps.google.com/etc">2031 16th</a></td>
  <td>[phone]</td>
  <td><a href="mailto:[e-mail]"><img src="email_icon.gif" /></a></td>
  <td nowrap="nowrap">&nbsp;</td>
  <td align="center">&nbsp;</td>
  <td align="center">&nbsp;</td>
  <td align="center">&nbsp;</td>
</tr>
<tr class="toggle">
  <td colspan="8">More info coming soon.</td>
</tr>

Answer 1

Sorry for the codeless response:

To get the links working correctly, I believe you just need to remove return false from your click handler. I think that line is explicitly telling the links not to work.

Your problem with the arrows is that your state variable is_visible is global (which you should avoid btw), so every row is sharing the same variable. It would be better to store that state in a class on the tr, then check for it onClick. Or maybe better yet have a different handler for the ‘is visible’ rows based on that class.