title: Jquery Flyout Menu
body: <p>I have an unordered list with anchors living in a widget.  This widget can be placed anywhere on the screen by the user.  A user should click on an li a element and a hidden div should appear.  My script generally handles a fixed position which can be an problem if the user moves this width to another location on the screen.  I'm searching for  plugin or some guidance on how to make this the most flexible given the circumstances.  Any help would be greatly appreciated.</p>
  
  <p>Here is my code so far.  CSS is pretty straight forward handling absolute positioning.</p>
  
  <pre><code>$(document).ready(function(){
  
           /*
              TODO 
          1. swap classes after clicking
           */
  
  
              $("a#link1").click(function(){
                  $("a#link2").removeClass("on"); 
                  $("#linkContentsWrap2").hide();
                  $(this).addClass("on");
                  $("#linkContentsWrap").show();
  
                  return false;
              });
  
  
  
              $("a#link2").click(function(){
                  $("a#link1").removeClass("on"); 
                  $("#linkContentsWrap").hide();
                  $(this).addClass("on");
                  $("#linkContentsWrap2").show();
  
                  return false;
              });
  
  
  
              });
  
              $(document).click(function(e){ 
                        if (!$(e.target).parents().filter('#linkContentsWrap').length) { 
                                    // close your dialog 
                                    $("a#link1").removeClass("on");
                                    $("#linkContentsWrap").hide();
                         } 
              }); 
              $(document).click(function(e){ 
                        if (!$(e.target).parents().filter('#linkContentsWrap2').length) { 
                                    // close your dialog 
                                    $("a#link2").removeClass("on");
                                    $("#linkContentsWrap2").hide();
                         } 
              }); 
  </code></pre>