Two the same popup plugins not working on one page

Question

I am using popup plugin presented by some user of stackoverflow. It works perfectly, but I wanted to add another one on the same page and it does some strange things. The first one works fine, the second one opens, but when i want to close it, it opens the first one instead. Could someone give me any clue please? I have changed all the classes, IDs etc

First one:

    ...
    <a href='/contact' class='menuButton' id='contact'>KONTAKT</a>
    <div class="messagepop pop">
      <p>popup message1</p>
    </div>
    ...

<script>
  function deselect(e) {
    $('.pop').slideFadeToggle(function() {
      e.removeClass('selected');
    });    
  }

  $(function() {
    $('#contact').on('click', function() {
      if($(this).hasClass('selected')) {
        deselect($(this));               
      } else {
        $(this).addClass('selected');
        $('.pop').slideFadeToggle();
      }
      return false;
    });

    $('.close').on('click', function() {
      deselect($('#contact'));
      return false;
    });
  });

  $.fn.slideFadeToggle = function(easing, callback) {
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
  };

</script>

Secone one:

   ...
   <a href='/contact2' class='menuButton' id='contact2'>BILETY</a>
   <div class='messagepop2 pop2'>
     <p>popup message 2</p>
   </div>
   ...   

<script>
  function deselect(e) {
    $('.pop2').slideFadeToggle(function() {
      e.removeClass('selected2');
    });    
  }

  $(function() {
    $('#menuButtonBilety').on('click', function() {
      if($(this).hasClass('selected2')) {
        deselect($(this));               
      } else {
        $(this).addClass('selected2');
        $('.pop2').slideFadeToggle();
      }
      return false;
    });

    $('.close2').on('click', function() {
      deselect($('#menuButtonBilety'));
      return false;
    });
  });

  $.fn.slideFadeToggle = function(easing, callback) {
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
  };
</script>

EDIT: The script comes from the best answer HERE

You have two functions with the same name. There is a conflict. — Gary Hayes, Oct 19 '15 at 14:21
in the second piece of code you confused `#contact2` with `#menuButtonBilety`. please use a single id-selector of your choice in order to align the two solutions and simplify the search of the solution. — morels, Oct 19 '15 at 14:23

score 1 · Accepted Answer · answered Oct 19 '15 at 14:08

In your case probably you are overriding the deselect function.

But instead of multiply your code one for each element instance you can set it more general using DOM structure hierarchy, like:

function deselect(e) {
    e.next('.pop').slideFadeToggle(function () {
        e.removeClass('selected');
    });
}

$(function () {
    $('.menuButton').on('click', function () {
        if ($(this).hasClass('selected')) {
            deselect($(this));
        } else {
            $(this).addClass('selected');
            $(this).next('.pop').slideFadeToggle();
        }
        return false;
    });


});

$.fn.slideFadeToggle = function (easing, callback) {
    return this.animate({
        opacity: 'toggle',
        height: 'toggle'
    }, 'fast', easing, callback);
};

Demo: http://jsfiddle.net/IrvinDominin/u2fkff64/

Two the same popup plugins not working on one page

1 Answers1