Question

I have a dev page set up here: http://dev.harryg.me/da/

On the side I have 3 divs that should animate open when clicked and animate closed when the title is clicked again.

I wanted to add the functionality so that when the user clicks somewhere else on the document all the divs will close. This almost works great, except that once a div has been opened and closed as a result of clicking outside the user must click twice on it to reopen it.

Any idea of the cause?

Here is my jQuery…

jQuery(function($) {
    $('h2.tab-title').toggle(function() {
        $(this).parent().animate({left:'0px'}, {queue:false, duration: 500});
    }, function() {
        $(this).parent().animate({left:'-338px'}, {queue:false, duration: 500});
    });

});
jQuery(".side-tab").click(function(){ return false; });
jQuery(document).bind("click", function() { jQuery(".side-tab").animate({left:'-338px'}, {queue:false, duration: 500}); });

Answer 1

demo

Create an open and close event and trigger one or the other on subsequent clicks, trigger close on document click.

<div><h2 class="tab-title">h2</h2></div>
<div><h2 class="tab-title">h2</h2></div>
<div><h2 class="tab-title">h2</h2></div>
<div><h2 class="tab-title">h2</h2></div>

JS

$('h2.tab-title').on('open', function() {
    $(this).parent().animate({left:'0px'}, {queue:false, duration: 500}).data('open',true);
}).on('close', function() {
    $(this).parent().animate({left:'-338px'}, {queue:false, duration: 500}).data('open',false);
}).on('click', function(){
    if ($(this).parent().data('open')){
        $(this).trigger('close');
    }else{
        $(this).trigger('open');
    }
});
$(document).on('click', function(){
     $('h2.tab-title').trigger('close');
});

$('.side-tab').on('click', function(e){ e.stopPropagation(); }); // stop any click in the side tab from bubbling up to the document