How can I use this button in both the body and footer?

Question

I would like to have the button in both the body and footer but it seems like it can't access the menu and if I paste the menu in the footer as well it doesn't let you click the footer one and instantly closes the one inside the body.

<!-- Connect Menu -->
<div id="menu">
  <nav>
    <a href = "mailto:adamshort1994@gmail.com" target = '_blank'>
      <img border = '0' src = 'images/emailicon.png'></a>
    <a href = "http://uk.linkedin.com/in/shortadam/" target = '_blank'>
      <img border = '0' src = 'images/linkedinicon.png'></a>
    <a href = "https://twitter.com/addrumm" target = '_blank'>
      <img border = '0' src = 'images/twittericon.png'></a>
  </nav>
</div>

The button's function:

<a id="openMenu">CONNECT</a>
<script>
  $("#openMenu").click(function() {
      var menu = $("#menu");
      if ($(menu).is(":visible")) {
        $(menu).animate({width: 0}, 1000, function() {
          $(menu).hide();
        });
      } else {
        $(menu).show().animate({width: 100}, 1000);
      }
  });
</script>

How would I go about putting the button in the footer and have the two scripts work together?

Answer 1

Your issue is being caused because you're using multiple of the same id s which must be unique. Change them to use classes instead.

<a class='openMenu'>CONNECT</a>
...
<a class='openMenu'>CONNECT</a>

JS

Refer to the button using the . character.

$(document).ready(function () {
    $(".openMenu").click(function() {
        var menu = $("#menu");
        if ($(menu).is(":visible")) {
            $(menu).animate({width: 0}, 1000, function() {
                $(menu).hide();
            });
        } else {
            $(menu).show().animate({width: 100}, 1000);
        }
    });
});

---

After looking at your source, the problem is occurring because you're setting up the event multiple times. Just add the above JavaScript once to your code, not once per button, as it attaches the event to both buttons. I put it in document ready to ensure both buttons are loaded when it's called.

The reason that both buttons act differently is because the when the first $(".openMenu").click() is setup only first first button exists, on the second one both buttons do. So it calls the show and then hide code immediately for the first button.