Open/close with one button and close on clickOutside with jQuery

Question

I have a problem with a button. I have searched the archive, but coudn't seem to find a proper solution.

I would like the button to open and close the header and at the same time I also wan't to close the header when clicked outside the header

As you can see on my example: http://www.danieldoktor.dk/test/test.html

I can't get it to function correctly.

Here's the code I can't get to work.

<div class="lists">
    <header class="box_header" id="box1">
        <h1>HEADER 1</h1>
        <div class="setting" id="btn1"></div>
        </header>

$(document).ready(function(){  

    //When mouse rolls over
    $("#btn1").click(function () { 
        $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'})  
    });  

    //When mouse is removed
    $("#btn1").mousedown('', function(){  
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:1000, easing: 'easeInBack'})  
    });


    $("#box1").hover('', function(){  
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:1000, easing: 'easeInBack'})  
    });

Can any of you help?

Daniel

score 0 · Answer 1 · answered Feb 25 '13 at 10:43

The mousedown event is fired as soon as one presses the mouse button. I think what you are looking for is the mouseleave event :) And there is no need for '' as a first parameter, just do:

$("#btn1").mouseleave(function(){  
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:1000, easing: 'easeInBack'})  
    });

Actually I would recommend you to also use the .mouseenter() event, rather than .hover().

score 0 · Accepted Answer · edited May 23 '17 at 11:43

First, you should change your code for click event to something like this:

$("#btn1").click(function () { 
    if(!$("#box1").hasClass('header-down')){
        $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }

});

Then, your code for closing header with a click outside it could look like this:

$(document).click(function(){
    if($("#box1").hasClass('header-down')){
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down'); 
    }
}

$("#box1").click(function(e){
    e.stopPropagation();
}

See this question/answer for how to trigger an event by clicking outside an element.

Thank you. The click function works very well, but I can't get the click outside function to work properly? It says there is an error? — DWTBC, Feb 25 '13 at 11:38
I got it to now ;) It just needed a closing tag. Thank very much for the help — DWTBC, Feb 25 '13 at 11:51

Open/close with one button and close on clickOutside with jQuery

2 Answers2