Can't hide content after it being visible. Also, how to shorten the code

Question

I have 4 links in my menu; about, archives, categories, and links. If I click on "about" the content for "about" is being visible. If I then click on "categories", the content for "about" will be replaced with the content for "categories".

So far so good, but I can't hide the content if I click on the link for the content that being currently visible. Demo on jsFiddle.

$('body').on('click', '#page', function() {

    var page = $(this).attr('data');


    if($('.menu-pages').is(':visible')) {
        if(page == 'about') {
            $('#about').show();

            $('#archives').hide();
            $('#categories').hide();
            $('#links').hide();


        } else if(page == 'archives') {
            $('#archives').show();

            $('#about').hide();
            $('#categories').hide();
            $('#links').hide();


        } else if(page == 'categories') {
            $('#categories').show();

            $('#about').hide();
            $('#archives').hide();
            $('#links').hide();


        } else if(page == 'links') {
            $('#links').show();

            $('#about').hide();
            $('#archives').hide();
            $('#categories').hide();
        }



    } else {
        $('.menu-pages').show();

        if(page == 'about') {
            $('#about').show();

        } else if(page == 'archives') {
            $('#archives').show();

        } else if(page == 'categories') {
            $('#categories').show();

        } else if(page == 'links') {
            $('#links').show();
        }
    }

});

How can I make the content for the pages hide when I click on the link in my menu, after I have made the content for the page visible? And how can I make the code shorter?

Answer 1

Here's a way to do it much more easily

    var selector = '#' + page;
    var isVisible = $(selector).is(':visible');
    var all = $('#about, #archives, #categories, #links');
    all.hide();
    if(!isVisible)
        $(selector).show();

Fiddle

Answer 2

Here is one way to do the first part by using .is(':visible').

$('body').on('click', '.menu-link', function() {
  var page = $(this).attr('data');
    $('.menu-pages div').each(function() {
      if (this.id != page)
        $(this).hide();
    });
    if ($('#' + page).is(':visible'))
      $('#' + page).hide();
    else
      $('#' + page).show();
});

JSFiddle

Answer 3

It's not too difficult, but there is something important to change in your sample code. HTML doesn't allow "sharing" element IDs. You have multiple elements with the same id ('page'). That's non-conformant and should be avoided.

As for the JS part, this will work (After changing the IDs):

$('body').on('click', '[id^="page"]', function() {
    var page = $('#' + $(this).attr('data'));
    var isVisible = page.is(':visible');
    $('.menu-pages>div').hide();
    if(!isVisible)
    {
        page.show();
        $('.menu-pages').show();
    }
});

And a fixed fiddle