隐藏具有特定类的所有元素并按ID显示

Question

I have all elements of a specific class being hidden upon page load using jquery's hide() function. I am trying to display the element again based upon it's ID when a link is clicked.

There are 7 elements with the class being hidden, each with a different ID. When the link containing href="#element-id" is clicked it should show only that element and keep all other elements hidden.

Here is my current code hiding the elements:

var menu = $('div.menu-wrapper');
menu.hide();

And here is what I have that is supposed to display the correct element on click:

$('area').click(function() {
    if($(this).attr('id') !== 'button') {
        var target = $(this).attr('href');
        target.toggle('slide', {
            direction: 'right'
        }, 900);    
    }
});

Right now nothing happens when clicking on the element. How can I keep all elements with the class menu-wrapper hidden while only the element with the class menu-wrapper and the correct ID is visible?

Answer 1

Try

var menu = $('div.menu-wrapper');
menu.hide();
//register the event handler to area elements other than #button
$('a:not(#button)').click(function () {
    //hide all elements referred menu
    menu.hide();
    //get the target jQuery wrapper, the href need to start with #
    var target = $($(this).attr('href'));
    target.toggle('slide', {
        direction: 'right'
    }, 900);
});