closing opening container on click
<p>Container is initially hidden.</p>

<p>Container opens when clicked on ".myclass".</p>

<p>Container should stay open until clicked on anything! outside of ".container".</p>

<p>Container should also close, when clicked on ".myclass"</p>

<p>Elements inside of "div class='myclass'" do not fully overlap parent divs, so user can click on parent div or any inside elements (depending on click location).</p>

<p>problems here: ".container" closes immediately once it opens.</p>

<p>Code below.</p>

<pre><code>&lt;div class="myclass"&gt;
&lt;div&gt;
    &lt;div&gt;
        &lt;div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="container"&gt;&lt;/div&gt;


&lt;script&gt;
//click to open
$(".myclass").click(function(){

        var target = $('.container'); 
        if( target.is(':hidden') ) {
            $(".container").slideDown("fast");
        } else {
            $(".container").slideUp("fast");
        }
    });

//click outside to close 
$(document.body).click(function(event){ 
        var outside_area = $(event.target); 

        if (!outside_area.is(".myclass") &amp;&amp; !outside_area.is(".container") ){ 
            $(".container").slideUp("fast");    
        }
    }); 
</code></pre>

<p></p>
