すべての負荷が表示されているフィルタリングボックス

Question

コードペンのコードを使用してフィルタリングボックスを作成しました。もともとは、私が離陸したすべてのオプションを表示していました。しかし、javascriptはすべてのオプションをロードしています。デフォルトで最初のオプションをロードするには、JSで何を変更する必要がありますか？ https://jsfiddle.net/zpzyy9ge/

jQuery(document).ready(function($){ 
    var $btns = $('.btn').click(function() { 
    if (this.id == 'all') { 
    $('#parent > div').fadeIn(450); 
    } else { 
    var $el = $('.' + this.id).fadeIn(450); 
    $('#parent > div').not($el).hide(); 
    } 
    $btns.removeClass('active'); 
    $(this).addClass('active'); 
}) 
    }); 

Answer 1

のJavaScriptは、ページにしているとあなたがそれらを隠すために何もしないので、それらは単にデフォルトでは表示されている、それらの要素を示していません。 （テストとして、完全にJavaScriptを削除して、彼らはまだ表示されていることを確認します。）

あなたは、単純なCSSルールでそれらをデフォルトで非表示にすることができ、例えば：

.box { display: none; } 

Updated jsFiddle