Sliding a div in while sliding a div out, on toggle

[KeithF]

Hello, i am trying to set up a couple of icons that when clicked slide a div on and another off screen.

Like seen here http://www.vogue.co.uk/spy/celebrity-photos/2014/02/04/david-bailey-exhibition-opening when clicking on the men and article icons to the left.

 

This is what i have: http://www.keithfrenchdesigns.com/RunwayMag/index.html 

 

My JS:

 var boxes = $('ul.topLevelNavigation');
   $(document).ready(function() {
    $('.button').click(function(e) {
        e.preventDefault();
        var box = $($(this).attr('href'));
        if (!box.hasClass("topLevelNavigation")) {
            var current = $('ul.topLevelNavigation');
            current.stop().animate({left: '-25%',}, 500 ).removeClass('topLevelNavigation');
            box.stop().animate({left: '25%',}, 500 ).addClass('topLevelNavigation');
        }
	});
	});

As you can see i get one partially on screen, but then when i start toggling the icons things began to slide on and off. Another issue is, the first navigation is not even showing correctly on load of the page..

 

I'm new to JavaScript, so i've gotten a little confused on why it's acting the way it is. Thanks in advance for any help.