JQUERY-选项卡-在日期过滤器中显示所有div内容

我在jsfiddle上有一个工作正常的JQUERY Tab部分。

页面加载时，我希望显示.sortALL。

如何使其与已经显示的sortALL一起加载？我在下面附上了一张照片和代码。这也将要求CSS高亮选项卡处于活动状态，以使其颜色与内容相同。

谢谢你的帮助。

JSFIDDLE：

http://jsfiddle.net/k5g6wcw3/

图像：

代码：

的CSS

*{margin:0;padding:0;float:left;width:100%;}
#tabs{width:80%;margin:2% 10%;background:#efefef;min-height:250px;}
a{cursor:pointer;display:block;width:20%;background:#ddd;text-align:center;padding:2% 0;text-decoration:none;color:#000;}
a:hover{background:#ccc;color:#000;}
.post{padding:2%;width:96%;}
.highlight {background: #efefef;}

JQUERY

// Variable
var posts = $('.post');
posts.hide();


// Click function
$( ".sort" ).click(function() { 
    // Get data of category
    var customType = $( this ).data('filter'); // category
    console.log(customType);
    console.log(posts.length); // Length of articles

    posts
        .hide()
        .filter(function () {
        return $(this).data('cat') === customType;
        })
        .show(50);
});

// All
$( "#showAll" ).click(function() {
  $( ".post" ).show(50);
});


// color toggle
$( ".sort" ).click(function() {
  $( this ).toggleClass( "highlight" ).siblings().removeClass("highlight");
});

的HTML

<!--sort links-->
<div id="tabs">
<a href="#" class="sort" id="showAll" >Show All</a>
<a href="#" class="sort" data-filter=".sortA" >Sort A</a>
<a href="#" class="sort" data-filter=".sortB" >Sort B</a>
<a href="#" class="sort" data-filter=".sortC" >Sort C</a>
<a href="#" class="sort" data-filter=".StateA">State A</a>


<!--A-->
<div data-cat=".sortA" class="post"><h2>Sort this A A A</h2><p>This is all about sort A</p></div>
<!--B-->
<div data-cat=".sortB" class="post"><h2>Sort this B</h2><p>This is all about sort B</p></div>
<!--C-->
<div data-cat=".sortC" class="post"><h2>Sort this C</h2><p>This is all about sort C</p></div>
<!--A-->
<div data-cat=".sortA" class="post"><h2>Sort this A A A</h2><p>This is all about sort A</p></div>
<!--Hopewell-->
<div data-cat=".StateA" class="post"><h2>State A Listings</h2><p>This is all about sorting State A listings</p></div>

</div>