Make browser's back button work when using hide and show (jquery)

Question

I've seen the new website of megaupload (mega) and we've got this:


Ok, if I press on left-menu contacts, it only reloads the white part on the image, if I press messages, the same, it only reloads white part. But if I go from contacts to messages and I press browser's back button, it goes from messages to contact and only reloads white part as always.

In my website, I do the same using jquery hide and show, but obviously, if I press browser's back button it doesn't hide the div and shows the other one.

My web site is only one html file and there are 4 div that get shown or hidden depending on the button you press, this is an example:

$("#btn_contact").click(function () {
    $("#content_contact").show();
    $("#content_home").hide();
    $("#content_products").hide();
    $("#body_aux").hide() ;  
    $(this).addClass('visited');
    $('#btn_products').removeClass('visited');
    $('#btn_home').removeClass('visited');  
});

Can anybody tell me how to find this with jquery or whatever I have to use.
I don't know if I've explained myself well, if not, ask me to do it better.
I would appreciate any help. Thanxs a lot.

Answer 1

Maybe it'd be easier for you and more appropiate to make "content_contact.html", "content_home.html", and so on and use .load() function as Ozan Deniz said. You wouldn't have to change margins, positions, etc. and back button would work withouth programming. I think is not appropiate to make the whole website using just one html file, showing and hiding div's, ofcourse you can do this but maybe is not the right way. I'm newbie at this, but that's what an expert told me beacuse I was doing something similar to that.
Hope to help you.