jquery - 同位体: フィルターが選択されている場合にさらに多くのフィルターを表示する

Question

何かが選択されるまでフィルターを非表示にすることで、Isotope フィルター リストをより使いやすくしようとしています。

ここに JSFiddle があります: http://jsfiddle.net/LxNXM/

Isotope を JSFIddle で機能させるのに苦労しましたが、それでも必要な助けが得られることを願っています。

Fiddle には、太い緑色の線があります。その行の下には、「ボディ パーツ」が選択されていない限り非表示にしたいフィルター オプションがあります。

したがって、緑色の線の下のフィルターが非表示になっていて、ユーザーが [体の部分] で [胸] を選択すると、[胸] フィルターがフェードインし、ユーザーは上、中、または下を選択できます。

同位体のドキュメントでこれがカバーされているのを見たことがないのですが、どうすればこれを行うことができますか?

次のように動作するようになりました：

1. 各ボディパーツ フォーカス フィルター リストの周りに ID を追加しました。例: #chestfocus
2. ボディ パーツ フィルタ リストの各アンカーに ID を追加しました。例: #chestclick

そして、コンテンツを非表示および表示する JavaScript は次のとおりです。

$(document).ready(function() {

//Hiding Focus Areas
    $('#chestfocus, #backfocus, #shouldersfocus, #legsfocus, #armsfocus').hide();


//Display Chest Focus List
    $("#chestclick").click(function() {
        $("#backfocus, #shouldersfocus, #legsfocus, #armsfocus").fadeOut("300", function(){
            $("#chestfocus").fadeIn("500");
        });
    });

//Display Back Focus List
    $("#backclick").click(function() {
        $("#chestocus, #shouldersfocus, #legsfocus, #armsfocus").fadeOut("300", function(){
            $("#backfocus").fadeIn("500");
        });
    });

//Display Shoulder Focus List
    $("#shouldersclick").click(function() {
        $("#backfocus, #chestfocus, #legsfocus, #armsfocus").fadeOut("300", function(){
            $("#shouldersfocus").fadeIn("500");
        });
    });

//Display Legs Focus List
    $("#legsclick").click(function() {
        $("#backfocus, #shouldersfocus, #chestfocus, #armsfocus").fadeOut("300", function(){
            $("#legsfocus").fadeIn("500");
        });
    });

//Display Arms Focus List
    $("#armsclick").click(function() {
        $("#backfocus, #shouldersfocus, #legsfocus, #chestfocus").fadeOut("300", function(){
            $("#armsfocus").fadeIn("500");
        });
    });
});

切り替え前にリストがちょっと点滅しますが、切り替えをもう少しスムーズにする方法はありますか?