Question

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.

Answer 1

I’m going to go out on a limb here and suggest that instead of continuously writing code that works around your markup, structure your markup so that your code works automagically.

You should mark all your nav links with a common class instead of an ID:

<a href="#" class="navlink">Link 1</a>
<a href="#" class="navlink">Link 2</a>
<a href="#" class="navlink">Link 3</a>

and all your hidden divs in a similar manner:

<div class="navhidden">foo</div>
<div class="navhidden">bar</div>
<div class="navhidden">herp</div>

Now your code can just be something as simple as:

jQuery(function($) {

    var $navlinks = $('.navlink'),
        $navhiddens = $('.navhidden'),
        $overlay = $('#overlay');

    $navlinks.on('click', function (e) {

        // this is your link
        $link = $(this);

        // get my hidden div + toggle
        $my_navhidden = $navhiddens
            .eq($navlinks.index(this))
            .toggle();

        // hide all the other navhiddens 
        $navhiddens.not($my_navhidden).hide();

        // hide or show the overlay?
        if ($navhiddens.filter(':visible').length > 0) {
            $overlay.show();
        } else {
            $overlay.hide();
        } 

    });

});

This has the advantage of being able to add more links + navhiddens on your markup without changing a single thing in your code. Additionally, how easy is it to add something like .navhidden { display:none; } in your CSS to hide everything?

Instead of changing $('#nav1,#nav2,#nav3') to $('#nav1,#nav2,#nav3,#nav4') and so on and so forth when you add a new link, use the time to get yourself a cup of coffee instead. You can use Javascript / jQuery to determine the ordinal index of an element anyway; there’s virtually no need to mark your DOM elements with ordinal sequences like nav1 nav2 nav3 … navn.

As a side note, the .on syntax is jQuery 1.7.x. If you’re not using that, change that to .bind.

EDIT

Added in a bit of code to logically toggle the overlay on and off. It’s not the most elegant, but you get the gist.