Question

I need to create navigation that shows / hides multiple divs.

Here is what I need to be able to do: If a user clicks on any of the “options” I need a class named “selected” associated to the current selected or chosen item within the nav – this means adding a class to the anchor. You will see there is CSS styling for the class “selected” in my example below.

View current progress

I am also having trouble trying to have either “option 1” or “option 2” already selected onload so that all of the divs do not appear – Onload I need only one div to appear with the correct “option” “selected” if that makes sense.

All suggestions welcome!

Answer 1

You should use data attributes, as just target is’nt really valid. I changed it to data-target and did:

$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
});​

FIDDLE

on() will only work in jQuery 1.7+, so if using an older version of jQuery (your fiddle is), stick with click().