Visibility Filter(可視フィルタ)

HTML

<h2 class="clear">:hidden</h2>
<button class="hiddenbutton">Show!</button>
<ul class="first">
    <li>list0</li>
    <li class="hidden">list1</li>
    <li>list2</li>
</ul>
<ul class="first">
    <li class="hidden">list3</li>
    <li class="hidden">list4</li>
    <li></li>
</ul>

<h2 class="clear">:visible</h2>
<button class="visiblebutton">hide!</button>
<ul>
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
</ul>
<ul class="visible">
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
</ul>

CSS

.clear{clear:both;}
h2{padding:15px 0 5px 10px;
   font-size:20px;
    color:blue;
    border-top:1px solid #eee;
}


ul{margin:15px;}
li{padding:2px 0;}
li.hidden{visibility:hidden,color:red;}
ul.visible li{color:red;}

JavaScript

$(function(){
    

/* :hidden */
//非表示になっているものを全て表示する
$(".hiddenbutton").click(function(){
    $("ul li:hidden").show();
    });

/* :visible */
//表示されているものを非表示にする
$(".visiblebutton").click(function(){
    $("ul.visible li").hide();
    });
    
//end    
});