why does jquery click event (hide/show) only work properly for the first element clicked

Question

I have laid out my page to have a "navigation" page that consists of 3 divs that span the page, all 33% height. When you click one of the divs the other two should slide out and the information pertaining to the div you clicked should slide in in their place. This works for the first element that is clicked, no matter which one it is. But the second one I click always wraps the element to the wrong line on slide in. Any help would be much appreciated. Each div has its own click event, I have included one of the 3 below.

$('#contactdiv').click(function(){
  $('#aboutdiv').hide('slide', {direction: 'right'}, 1000);
  $('#portfoliodiv').hide('slide', {direction: 'left'}, 1000);
  $('#contactinfo1').show('slide', {direction: 'left'}, 1000);
  $('#contactinfo2').show('slide', {direction: 'right'}, 1000);
  $('#menutoggler').show('pulsate');
  $('#menutoggler').click(function(){
    $('#contactinfo2').hide('slide', {direction: 'right'}, 1000, function(){
        $('#portfoliodiv').show('slide', {direction: 'left'}, 1000);
    });
    $('#contactinfo1').hide('slide', {direction: 'left'}, 1000, function(){
        $('#aboutdiv').show('slide', {direction: 'right'}, 1000);
    });
    $('#menutoggler').hide('pulsate');
});
});

Answer 1

I'm assuming, you added the below piece of code in all (contactdiv, portfoliodiv, aboutdiv) of the click handlers.

$('#menutoggler').click(function(){})

So everytime you click one of the 3 menu divs, you are adding one click handler on #menutoggler.

Say you clicked on contactdiv and then aboutdiv. Now, if you click on menutoggler, the click handle on #menutoggler inside contactdiv will ALSO be executed along with the click handle on #menutoggler inside aboutdiv (sorry if i didn't explained it properly)

What you should probably do is write separate click handlers based on "task"

1. click handler on either of contactdiv, portfoliodiv, aboutdiv
2. toggle menutoggler

HTML

<div id="contactdiv" class="menuItem"></div>
<div id="portfoliodiv" class="menuItem"></div>
<div id="aboutdiv" class="menuItem"></div>

JS

var ids = ['contactdiv', 'portfoliodiv', 'aboutdiv'];
var activeMenu;
function hideOtherMenus(id) {
  var otherMenus = ids.filter(function(i) {
    return i !== id;
  });
  otherMenus.forEach(function(i) {
    // you probably need more if/else conditions if you want to set the correct direction
    $('#' + i).hide('slide', {direction: 'right'}, 1000);   
  });
}
function showInfo(id) {
  if(id === 'contactdiv') {
    ['contactinfo1', 'contactinfo2'].forEach(function(i) {
      // you probably need more if/else conditions if you want to set the correct direction
      $('#' + i).show('slide', {direction: 'right'}, 1000);     
    });
  }
  // do the same for portfolio and about
}


$('.menuItem').click(function(){
  activeMenu = this.id;
  hideOtherMenus(activeMenu);
  showInfo(activeMenu);
  $('#menutoggler').show('pulsate');
});

$('#menutoggler').click(function(){
  if (activeMenu === 'contactdiv') {
    $('#contactinfo2').hide('slide', {direction: 'right'}, 1000, function(){
        $('#portfoliodiv').show('slide', {direction: 'left'}, 1000);
    });
    $('#contactinfo1').hide('slide', {direction: 'left'}, 1000, function(){
        $('#aboutdiv').show('slide', {direction: 'right'}, 1000);
    });
  }
  // do the same for portfolio and about
  $('#menutoggler').hide('pulsate');
});

Note: you could handle the if/else conditions better if you name the divs properly.