close any open flyout/dropdown when another is opened
<p>I have these two flyout menus they toggle in and out and up and down respectfully. When they are out the occupy the same space overlapping on each other. It doesn't look that bad but it would be better if the open menu closed when the other was clicked open. It's possible in the future that there will be more than two menus. So I need a solution that when you open a menu it simultaneously closes any open menus. I suppose they would need a class that relates them. I'm unclear on how to close other open menus with out also closing the one that I am trying to open at that moment. Hope that makes sense.</p>

<pre><code>showFooWindow = function() {
$('.channels-sessions-tab').click(function(){
    var $CSpane = $('.current-foo');

    var paneState = parseInt($CSpane.css('left'),10) == 0 ? -$CSpane.outerWidth()-11 : 0

    $CSpane.animate({
        left: paneState
    }, {
        duration: 700,
        specialEasing: {
            width: 'linear',
            height: 'easeOutBounce'
        }});
});
};

showBarWindow = function() {
$('.channel-session-tab').click(function(){
    var $CSpane = $('.current-bar');

    var paneState = parseInt($CSpane.css('top'),10) == 0 ? -$CSpane.outerHeight()-11 : 0

    $CSpane.animate({
        top: paneState
    }, {
        duration: 600,
        specialEasing: {
            width: 'linear',
            height: 'easeOutBounce'
        }});
});
};
</code></pre>
