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? Thanks!
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> ');
$ ('.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>(720) 235-4232</td>
<td><a href="mailto:[email protected]"><img src="email_icon.gif" /></a></td>
<td nowrap="nowrap"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr class="toggle">
<td colspan="8">More info coming soon.</td>
</tr>