javascript - jQuery click outside a div animates it closed works but must click twice to open -

javascript - jQuery click outside a div animates it closed works but must click twice to open -

i have dev page set here: http://dev.harryg.me/da/

on side have 3 divs should animate open when clicked , animate closed when title clicked again.

i wanted add together functionality when user clicks somewhere else on document divs close. works great, except 1 time div has been opened , closed result of clicking outside user must click twice on reopen it.

any thought of cause?

here 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(){ homecoming false; }); jquery(document).bind("click", function() { jquery(".side-tab").animate({left:'-338px'}, {queue:false, duration: 500}); });

demo

create open , close event , trigger 1 or 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 click in side tab bubbling document

javascript jquery