jQuery change toggle order on close

Question

I'm looking to redefine my toggle function. Right now it toggles fine, however, a first toggle "opens" two different parts - which is good. When closing them I want to close them simultaneously or at least the list first. Additionally I'd also like to close both if anything but the list is 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 for rounded corners
    $("#profilesettings").width(newWidth).toggle(300); //new list width animation
 });
});

What I have at the moment: Fiddle

Any help is greatly appreciated. Thank you.

Answer 1

You are using callback function of animate method, the hide method should be called when the .username element is visible, so the animations are executed at the 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/