You can do this way:
$('#favorite_container, #account_container, #cart_container').click(function(e){
e.stopPropagation();
})
Demo Fiddle
Question
I have the following script to drop down a div. What is right is that when I click outside the div or choose another div to go down already dripped down div is going up.
But when I click on anything in the div so it should not go up?
Javascript:
$(document).ready(function() {
$('#favorite_holder').click(function(e) {
$('#favorite_container').slideToggle("fast");
$('#account_container').slideUp("fast");
$('#cart_container').slideUp("fast");
e.stopPropagation();
});
$('#account_holder').click(function(e) {
$('#account_container').slideToggle("fast");
$('#favorite_container').slideUp("fast");
$('#cart_container').slideUp("fast");
e.stopPropagation();
});
$('#cart_holder').click(function(e) {
$('#cart_container').slideToggle("fast");
$('#favorite_container').slideUp("fast");
$('#account_container').slideUp("fast");
e.stopPropagation();
});
$(document).click(function(){
$('#favorite_container, #account_container, #cart_container').slideUp("fast");
});
});
HTML:
<div id="favorite_holder">
<span class="price">click here</span>
</div>
<div id="favorite_container" style="display: none;">
content here...
</div>
<div id="account_holder">
<span class="price">click here</span>
</div>
<div id="account_container" style="display: none;">
content here two ...
</div>
<div id="cart_holder">
<span class="price">click here</span>
</div>
<div id="cart_container" style="display: none;">
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</div>
Solution
You can do this way:
$('#favorite_container, #account_container, #cart_container').click(function(e){
e.stopPropagation();
})
Demo Fiddle
OTHER TIPS
Easy method with your html and javascript:
Html:
<div id="favorite_holder" class="parent">
<span class="price">click here</span>
<div id="favorite_container" class="child" style="display: none;">
content here...
</div>
</div>
<div id="account_holder" class="parent">
<span class="price">click here</span>
<div id="account_container" class="child" style="display: none;">
content here two ...
</div>
</div>
<div id="cart_holder" class="parent">
<span class="price">click here</span>
<div id="cart_container" class="child" style="display: none;">
<form>
First name: <input type="text" name="firstname" /> <br\>
Last name: <input type="text" name="lastname" />
</form>
</div>
</div>
javascript:
$(document).ready(function() {
$('.parent').click(function() {
$('.child').slideUp("fast");
$(this).find("div").slideDown("fast");
});
$('.child').click(function(e) {
e.stopPropagation();
});
});