Div drop down and up

Question

Have the following script to get a div that Drop down when I click on it. But how can you do so that I it goes up if you click outside the div: a?

Jsfiddle.net

html

<div id="favorite_holder">
   <span class="price">click here</span>
</div>
<div id="favorite_container" style="display: none;">
    content here...
</div>

css

#favorite_holder {
padding:17px 6px 1px 6px;
font-size:12px;
text-align:center;
background:url(../img/icon_favorite.png) top center no-repeat #fff;
border-right:1px dotted #dddddd;
cursor:pointer;
}
#favorite_container {
position:absolute;
right:0px;
z-index:9;
width:336px;
margin:0px 0px 0px -87px;
padding:0px 0px 0px 0px;
font-size:12px;
color:#202020;
background:#fff;
-moz-box-shadow: 0 0px 6px rgba(0,0,0,0.1) !important;
-webkit-box-shadow: 0 0px 6px rgba(0,0,0,0.1) !important;
box-shadow: 0 0px 6px rgba(0,0,0,0.1) !important;
}

jquery

/* menu - favorite */
$(document).ready(function() {
$('#favorite_holder').click(function() {
    $('#favorite_container').slideToggle("fast");
});
});

Answer 1

Try below code.

$('#favorite_holder').click(function(e) {
    $('#favorite_container').slideToggle("fast");
    e.stopPropagation();
});

$(document).click(function(){
    $('#favorite_container').slideUp("fast");
});

Demo: http://jsfiddle.net/GVYEd/3/

for 2 divs: http://jsfiddle.net/GVYEd/6/