making jQuery .show() AND .hide() run side by side with UI effect

Question

I'm trying to make a nice menu with sliding effects in jquery: http://jsfiddle.net/rXjMV/5/

$(".goBack").click(function() {
    $(this).parent().hide('slide', {
        direction: 'right'
    });
    $("#parentSidebar").show('slide', {
        direction: 'left'
    });
});
$(".sidebarMover").click(function() {
    var newmenu = $(this).attr('name');
    $(this).parent().hide('slide', {
        direction: 'left'
    });
    $("#" + newmenu + "Sidebar").show('slide', {
        direction: 'right'
    });
});

notice that if you click on football the menu slides left and the other comes from the right but they come one below the other instead of side by side..

Tried many things, display: inline and using delay() with jQuery queue, but the problam is CSS I think, nut jQuery... any ideas?

Answer 1

Add position: absolute; width: 100%; in the container like that:

<div id="sideBar">
    <div id="sideHead">TICKET MENU</div>
    <hr id="sideHeadSeperator">
       <div class="sideItemContainer" id="parentSidebar" style="position:absolute;width:100%; ">
          <div class="sideItem sidebarMover" name="football">Football<i class="fa fa-caret-right"></i></div>
          <div class="sideItem sidebarMover" name="tennis">Tennis<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Rugby<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Basketball<i class="fa fa-caret-right"></i></div>
       </div>
       <div class="sideItemContainer" id="footballSidebar" style="display: none;position:absolute; ;width:100%;" >
          <div class="sideItem">Arsenal<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Chelsea<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Liverpool<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Manchester Utd<i class="fa fa-caret-right"></i></div>
          <div class="sideItem">Manchester City<i class="fa fa-caret-right"></i></div>
          <div class="goBack"><i class="fa fa-caret-left fa-inverse"></i> go back</div>
        </div>
        <div class="sideItemContainer" id="tennisSidebar" style="display: none;">
           <div class="sideItem">Wimbledon<i class="fa fa-caret-right"></i></div>
           <div class="sideItem">Rome Masters<i class="fa fa-caret-right"></i></div>
           <div class="sideItem">US Open<i class="fa fa-caret-right"></i></div>
           <div class="sideItem">Roland Garros<i class="fa fa-caret-right"></i></div>
           <div class="sideItem">Madrid Masters<i class="fa fa-caret-right"></i></div>
           <div class="goBack"><i class="fa fa-caret-left fa-inverse"></i> go back</div>
      </div>
</div>