Jquery Drop Down Box Click Outside

Question

I am trying to make it so when i click outside the box the box scrolls up but i cant manage to get that done.

   <style type='text/css'>
    #content {
    width: 400px;
    border-left: 10px solid #FA802F;
    border-right: 10px solid #FA802F;
    text-align: center;
    padding: 100px 0px 100px 0px;
    display: none;
}

#bottom{
    width: 420px;
    height: 100px;

    background-color: #FA802F;
    -webkit-border-bottom-left-radius: 50px;
    -moz-border-bottom-left-radius: 50px;
    border-bottom-left-radius: 100px;

    -webkit-border-bottom-right-radius: 50px;
    -moz-border-bottom-right-radius: 50px;
    border-bottom-right-radius: 100px;   
    }
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#bottom').toggle(

function() {
    $('#content').slideDown();
}, function() {
    $('#content').slideUp();
});
});//]]>  

</script>


</head>
<body>
  <div id="content">CONTENT</div>
<div id="bottom"></div>

</body>

score 0 · Answer 1 · answered Dec 09 '11 at 05:12

0

I use:

$(document).click(function(e) {
  if (/*test for mouse over the box*/) {
    $('#content').slideDown();
  }
}

answered Dec 09 '11 at 05:12

Gregory Kaczmarczyk

9
1

score 0 · Accepted Answer · answered Dec 09 '11 at 06:40

0

$('#bottom').click(function() {
    $('#content').slideDown();
});

$(document).click(function(e) {
    if (e.target.id !='bottom') {
        $('#content').slideUp();
    }
});

Fiddle: http://jsfiddle.net/t9hq9/24/

answered Dec 09 '11 at 06:40

adeneo

312,895
29
395
388

score 0 · Answer 3 · edited May 23 '17 at 12:20

0

try this working code on js fiddle

also look this post for more reference post

edited May 23 '17 at 12:20

Community

1
1

answered Dec 09 '11 at 06:49

Kamran Ali

5,904
2
26
36

Jquery Drop Down Box Click Outside

3 Answers3