make-the-connection.js

var mblConnect = {
  $cont: $('#connect'),
  $site: $('#site'),
  isOpen: false,
  $overlay: $('<div id="mbl-overlay" class="mbl-overlay js-connect-btn" />'),

  _getBtns: function () {
    return $('.js-connect-btn');
  },

  _open: function () {
    // append and fade in the overlay
    mblConnect.$site.append(mblConnect.$overlay);
    mblConnect.$overlay.fadeIn();
    // show the menu
    mblConnect.$cont.slideToggle('fast');
    // register that it's open
    mblConnect.isOpen = true;
    // re-enable, with the new button (the overlay)
    mblConnect.enable();
  },

  _close: function () {
    // fade out and remove the overlay
    mblConnect.$overlay.fadeOut(function () {
      mblConnect.$overlay.remove();
    });
    // hide the menu
    mblConnect.$cont.slideToggle('fast');
    // register that it's closed
    mblConnect.isOpen = false;
  },

  _clicked: function () {
    // a button has been clicked:
    // open or close the menu, whichever's
    // the opposite of the current state
    if (mblConnect.isOpen) {
      mblConnect._close();
    } else {
      mblConnect._open();
    }
  },

  enable: function () {
    // make all buttons work
    var $btns = mblConnect._getBtns();
    $btns.off().on('click', mblConnect._clicked);
  }

};

mblConnect.enable();