I have several similar links that trigger different navigation divs to appear. I am trying to find a way in JQuery to determine which of the links was clicked and then trigger the appropriate open/close functions. The html is:
<a href="" id="nav1">1</a>
<a href="" id="nav2">2</a>
<a href="" id="nav3">3</a>
<div id="hidden1">nav links 1</div>
<div id="hidden2">nav links 2</div>
<div id="hidden3">nav links 3</div>
Currently I use a simple toggle assigned to each pair, but would like to set it up so that when someone opens a hidden div and then clicks another one, the first one will close.
Added ... My apologies for not explaining in more details my goals ... The nav menu has three items that need to be changed when a link is clicked. The link itself changes css going from text to an active "tab", the hidden nav toggles between hide & show, an overlay div also toggles between hide & show. When someone clicks the link it should show the overlay & hidden div and change the links css to active. If they click that link again it should toggle back. This part is easy to do. The challenge comes (least for me) is if they have the first hidden open and then click the third link, I want the first hidden to close and its link to change css back to normal and the third hidden to open and its link changed to active, but I want the white to stay open (not toggle on/off creating a flicker). ...
I thought this might work, but alas no luck:
$("#nav1,#nav2,#nav3").click(function(e)
{
//determine nav id ...
var nav_id = $(this).attr('id').match(/d+/);
});
Ultimately the plan is to determine the nav link clicked, then check to see if the background overlay is visible. If not then open the nav links paired hidden div and the overlay. If so, then check to see if hidden div with the same nav_id is open, if so then close everything or if not then close all hidden divs and open the paired hidden div.
See Question&Answers more detail:os