Question

following up from yesterday…

This portion of the code does work.

$(document).ready(function(){
$('#listMenu a').click(function (selected) {
        var getPage = $(this).attr('id');
        var getName = $(this).attr('name');

        //console.log(getPage);
        //console.log(getName);

            $(function() {
            $("#" + getName ).show();
            var getColor = $('#' + getName ).css('background-color');
            $('#header' ).css('background', getColor);
            $('#slideshow' ).css('background', getColor);
            $('span').css('background', getColor);
            $('#menuContainer').css('background', getColor);

        });

        $('li.listMenu ul').hide();
  });           
});

I am able to get what I wanted selected; based on vars getPage and
getName, now I need to hide what is not selected.

I have tried this:

$(function() {
  var notSelected = $('div').filter(selected).attr('id', 'name');
  $(this).hide();
  console.log(notSelected);
});

placed just above: $('li.listMenu ul').hide();

but it’s not correct, remember I am really a newbie.

what I see on screen is the new selected items on top of what should be hidden.

again any help is appreciated.

-sjs

Answer 1

I believe you want this if you’re clicking a <a> inside a div:

$('div').not($(this).closest('div')).hide();

Or if you meant to fade out the other <a> elements:

$('#listMenu a').not(this).hide();

The .not() function filters those elements matching out of the set, so .hide() will run on the rest of the elements. In your case selected is the click event, what you want is this which refers to the #listMenu a that the click is coming from.