Here's the code:

1. $(document).mouseup(function(e) {
           if($(e.target).parent(".panel").length==0) {
               $(".trigger").removeClass("active");
               $(".panel").hide("fast");
           }        
       });
   
   
   
   
   

I've got a click event attached to an anchor tag that is toggling a panel (the full code is below).  I want to be able to close the panel by clicking anywhere outside of the panel as well as the toggle event on the anchor tag.  The above mouseup function sort of works... but any divs or links inside of the panel that are clicked also cause the panel to hide.  I don't want this behavior.  I want all the panel contents to be click-able without collapsing the panel.  I want the anchor tag (trigger) to toggle the panel and any click outside of the panel itself to close the panel as well.

What am I doing wrong/overlooking?  Thanks for any help you might be able to provide. 

Here's the full JS code I am using:

1. $(document).ready(function(){        
       $(".trigger").click(function(e) {    
           e.preventDefault();        
           $(".panel").toggle("fast");
           $(this).toggleClass("active");        
       });        
       $(".trigger").mouseup(function() {
           return false
       });
       $(document).mouseup(function(e) {
           if($(e.target).parent(".panel").length==0) {
               $(".trigger").removeClass("active");
               $(".panel").hide("fast");
           }        
       });    
   });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Here's the full HTML code for the panel and trigger:

1. <div class="panel">
       <h3>Some Title Goes here</h3>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
       <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
       <div style="clear:both;"></div>
       <div class="columns">
           <div class="colleft">
           <h3>Link Block #1</h3>
               <ul>
                   <li><a href="#" title="home">Home</a></li>
                   <li><a href="#" title="about">About</a></li>
                   <li><a href="#" title="portfolio">Portfolio</a></li>
                   <li><a href="#" title="contact">Contact</a></li>
                   <li><a href="#" title="blog">Blog</a></li>
               </ul>
           </div>
           <div class="colleft">
           <h3>Link Block #2</h3>
               <ul>
                   <li><a href="#" title="home">Home</a></li>
                   <li><a href="#" title="about">About</a></li>
                   <li><a href="#" title="portfolio">Portfolio</a></li>
                   <li><a href="#" title="contact">Contact</a></li>
                   <li><a href="#" title="blog">Blog</a></li>
               </ul>
           </div>
       <div class="colleft">
           <h3>Link Block #3</h3>
               <ul>
                   <li><a href="#" title="home">Home</a></li>
                   <li><a href="#" title="about">About</a></li>
                   <li><a href="#" title="portfolio">Portfolio</a></li>
                   <li><a href="#" title="contact">Contact</a></li>
                   <li><a href="#" title="blog">Blog</a></li>
               </ul>
           </div>
           <div class="colright">
               <h3>Link Block #4</h3>
               <ul>
                   <li><a href="#" title="home">Home</a></li>
                   <li><a href="#" title="about">About</a></li>
                   <li><a href="#" title="portfolio">Portfolio</a></li>
                   <li><a href="#" title="contact">Contact</a></li>
                   <li><a href="#" title="blog">Blog</a></li>
               </ul>
           </div>
       </div>
       <div style="clear:both;"></div>
   </div>
   <a class="trigger" href="#">Click</a>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Again... the code sort of works... but it seems that any div or link that's nested in the panel container also causes the panel to close.  Clicking on the text and heading tags does not close the panel.