jQuery change toggle order on close -

i'm looking redefine toggle function. right toggles fine, however, first toggle "opens" 2 different parts - good. when closing them want close them simultaneously or @ least list first. additionally i'd close both if list clicked.

$('#loginbutton').click(function(){  $('.username').animate({         width : 'toggle'  }, 1000, 'swing',function(){ //set new loginbutton width     var newwidth = ($('.username').width()); //get new width     $('#loginbutton').toggleclass('expanded'); //just rounded corners     $("#profilesettings").width(newwidth).toggle(300); //new list width animation  }); }); 

what have @ moment: fiddle

any appreciated. thank you.

you using callback function of animate method, hide method should called when .username element visible, animations executed @ same.

$('#loginbutton').click(function () {     var $username = $('.username'),         $profile = $('#profilesettings'),         state = true;      if ($username.is(':visible')) {         $profile.hide(1000);         state = false;     }     $username.animate({         width: 'toggle'     }, 1000, 'swing', function () {         if (state) {             var newwidth = $(this).width();             $profile.width(newwidth).show(300);         }         $('#loginbutton').toggleclass('expanded');     }); }); 

http://jsfiddle.net/wxxym/