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');
});
});

Seems you are using duplicate id, Identifiers must be __unique__ — Satpal, Mar 08 '18 at 08:59
Try replacing `$('#contactdiv').click(function(){ ... });` with `$(document).on('click', '#contactdiv', function(){ ... });` ? — Barskey, Mar 08 '18 at 08:59
Because `id` values **must** be unique in the document. `$("#contactdiv")` will only select **one** element (because jQuery [effectively] optimizes it to `$(document.getElementById("contactdiv"))`). — T.J. Crowder, Mar 08 '18 at 09:00
@Barskey: Let's not suggest ways to continue using invalid markup, eh? (Not that there's anything wrong with delegation in general.) — T.J. Crowder, Mar 08 '18 at 09:00
@Barskey, Yes they must be unique otherwise HTML document is invalid — Satpal, Mar 08 '18 at 09:02
@T.J.Crowder Invalid markup? There's a lot of instances where `.click()` doesn't trigger, I suggested it in a comment because I didn't know if it was the solution. — Barskey, Mar 08 '18 at 09:04
I have two other click events listening to the other two unique id tags. they are all unique. Edit: there is a 'menutoggle' button that appears once you click one, and when you click that the page should go back to the original layout. — NolanJames, Mar 08 '18 at 09:09
@Barskey: The same `id` on multiple elements is invalid markup. (Well, markup for an invalid document.) — T.J. Crowder, Mar 08 '18 at 09:11
@NolanJames: Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). — T.J. Crowder, Mar 08 '18 at 09:12
You are changing the menutoggler element's click handler dynamically based on which div is clicked, and you're doing this directly using `$('#menutoggler').click(foo)` which will add up the event handlers, not replace them. Try binding/unbinding the handlers, like here https://stackoverflow.com/questions/17250308/first-unbind-click-and-then-bind-jquery — Dhruv Murarka, Mar 08 '18 at 09:28

Venugopal · Accepted Answer · 2018-03-08T09:40:09.843

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"

click handler on either of contactdiv, portfoliodiv, aboutdiv
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.

Thanks Venugopal! That makes a lot of sense. I was thinking that the problem was that the click handlers were adding up but couldnt figure out why and how to fix it. Ill try this and let you know if it fixes the issue!! — NolanJames, Mar 08 '18 at 09:47
This works like a charm!!! Thanks again. I spent way too long messing with this and you helped me fix it in 10 minutes. I greatly appreciate the help. — NolanJames, Mar 08 '18 at 09:57
Great! you may [accept the answer](https://stackoverflow.com/help/accepted-answer) that you believe is the best solution to your problem. — Venugopal, Mar 08 '18 at 10:20

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

1 Answers1