Passing a variable to trigger hide/show panels

Question

I have a panel hide/show setup that is triggered from a list item anchor. Works great. The problem is, I also have a dropdown menu in the site navigation that also needs to trigger each panel, from any page on the site. Like say, I have panels (in this order), "Hardware", "Software", "Accessories" on the Products page. So when I'm on the About page, and I click "Software", the expected result is to take me to the Products page and have the "Software" panel open. Here's my jquery script for the panel:

$("ul#product-type li a").click(function() {
$("ul#product-type li").removeClass("selected");
$(this).parent().addClass("selected");
var currentTab = $(this).attr("href");
    $("div.panel").hide();
    $(currentTab).show();
return false; });

Dropdown Nav Markup:

<ul id="nav">
<li><a href="/products/#hardware"><span>Hardware</span></a></li>
<li><a href="/products/#software"><span>Software</span></a></li>
<li><a href="/products/#accessories"><span>accessories</span></a></li>

I've tried adding the nav selector to the click function, but that doesn't work. Any ideas or suggestions would be hugely appreciated.

Cheers, Ryan

Answer 1

The href isn't a valid selector, since $("/products/#hardware") wouldn't work. However using the .hash property is perfect, as you'll get $("#hardware"). Use it like this:

$("ul#product-type li a").click(function() {
  $("ul#product-type li").removeClass("selected");
  $(this).parent().addClass("selected");
  $("div.panel").hide();
  $(this.hash).show();
  return false; 
});