$(function(){ /* :hidden */ //非表示になっているものを全て表示する $(".hiddenbutton").click(function(){ $("ul li:hidden").show(); }); /* :visible */ //表示されているものを非表示にする $(".visiblebutton").click(function(){ $("ul.visible li").hide(); }); //end });
<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>list5</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>
.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{display: none;color:red;} ul.visible li{color:red;}