jquery - jQueryの複数のスライドアウトメニュー-それぞれの一意の兄弟と同一の兄弟

Question

スライドアウトメニューごとに一意のIDではなく.next（）兄弟を使用して、コードを単純化しようとしています。ただし、各スライドアウトメニューに.next（）兄弟がある場合（前の兄弟をクリックしてメニューコンテナを開く）、コードを正しく取得できないようです。

最終的には、6〜8個の異なるCSSクラスよりも、単一のCSSクラスを維持する方が簡単になります。jQueryを記述して機能させるためのエレガントな方法があると確信しています...しかし、私はそれを取得できません。どんな助けでも大歓迎です。以下は、私のjsfiddle（一番上の行のスライドアウトメニューの「unique」elementsメソッドと2番目の行の「siblings」メソッドを含む）とsiblingsメソッドのjQueryです。

*編集：一度に1つのメニューしか表示しないようにしていることに注意してください。一番上の行には、同時に表示されるいくつかのスライドアウトメニューがありますが、それは特定の状況です。

http://jsfiddle.net/U3jHf/28/

$('.topIcon').click(function(){

    if($(this).next('.sideUITopIconContainer').is(':hidden')){  

            $(this).next('.sideUITopIconContainer').show();
            $(this).next('.sideUITopIconContainer').animate({'height':'456px'});
        $('sideUITopIconContainer').not(this).next('sideUITopIconContainer').animate({'height':'0'},function(){

                 $('sideUITopIconContainer').not(this).next('sideUITopIconContainer').hide();

        }); 
    }


    else{

        $(this).next('.sideUITopIconContainer').animate({'height':'0'}, function(){

                $(this).next('sideUITopIconContainer').hide();

        }); 
    }

});

助けてくれてありがとう。