The premise of these functions is to allow the user to click to open a box, then click anywhere else on the page to hide it.

The script is:

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

<script>
document.onclick = function() {
 if (toggle.el) {
  alert('yes');
  toggle.el.toggle();
 }
}

$.fn.toggleClick = function(e) {
 toggle.el = this;
 toggle.el.toggle();

 if (e.stopPropagation) e.stopPropagation();
 e.cancelBubble = true;

 return false;
}
</script>

// Usage
<div id="menu" style="position: absolute; display: none"></div>

<span onClick="$('#menu').toggleClick(event);
 $('#menu').css({ 'right': 55, 'width': 152 });
 $('#menu').ajax(link_to_script);">
  Click
</span>

Now, the way I understand it, the user clicks on "Click", which then triggers $.fn.toggleClick. this will be equivalent to the selector sent (in this case, #menu), and e is the event.

So within this plugin, the variable toggle.el is now equivalent to this, so it's the same as #menu.

The plugin works correctly, toggling the display of menu and showing the AJAX, as expected.

Then, when the user clicks somewhere else on the page, it should trigger document.click. In this case, toggle.el will have already been set in the plugin, and should be equivalent to #menu, right?

I know that toggle.el has SOME value at this point, because I do get the alert "yes", as expected. But then instead of toggling the display of menu, I get an error that toggle.el.toggle is not a function.

I think that the problem is in how I'm referring to the toggle.el variable. I've tried a few variations, with mixed results:

// these didn't give an error, but didn't change anything, either
$(toggle.el).toggle();
toggle.el.style.display= 'none';

// this resulted in the same "is not a function" error
toggle.el.hide();

Any thoughts on how I need to modify this to make it work?