<style>
.links {clear:both;}
.links li {display: inline-block;width: 80px;margin-bottom: 10px;}
.links2 {clear:both;}
.links2 li {display: inline-block;width: 80px;margin-bottom: 10px;}
.cate {clear:both; margin:10px;}
.cate li{
float:left;
width:80px;
height:96px;
margin:5px;
}
.cate li.m{
background-color:#99F;
}
.cate li.f{
background-color:#F99;
}
.actv {
background:#EE4400;
}
</style>
<script>
cnt= 0;
cnt2= 0;
$(document).ready(function(){
clickAction();
});
function clickAction(){
$('.btnf1').click(function() {
my_id = $(this).attr("id");
open(my_id);
});
$('.btnf2').click(function() {
my_id = $(this).attr("id");
open2(my_id);
});
}
function open(myid){
if(cnt==0){
$('.cate').css('display','none');
}
$('#cate_'+myid).toggle();
$('#'+myid).toggleClass('actv');
cnt++;
if(0 == $(".links .actv").size()){
$('.cate').show();
cnt= 0;
}
}
function open2(myid){
if(cnt2==0){
$('.m').css('display','none');
$('.f').css('display','none');
}
if(myid=='s1'){
$('.m').toggle();
}else{
$('.f').toggle();
}
$('#'+myid).toggleClass('actv');
cnt2++;
if(0 == $(".links2 .actv").size()){
$('.f').show();
$('.m').show();
cnt2= 0;
}
}
</script>
<h1>選択した条件のみ表示する</h1>
<ul class="links">
<li class="btn btnf1" id="c1">A</li>
<li class="btn btnf1" id="c2">B</li>
<li class="btn btnf1" id="c3">C</li>
</ul>
<ul class="links2">
<li class="btn btnf2" id="s1">Blue</li>
<li class="btn btnf2" id="s2">Red</li>
</ul>
<div id="cate_c1" class="cate">
<div class="name">A</div>
<ul>
<li class="m"></li>
<li class="m"></li>
<li class="f"></li>
<li class="f"></li>
<li class="m"></li>
<li class="f"></li>
</ul>
</div>
<div id="cate_c2" class="cate">
<div class="name">B</div>
<ul>
<li class="m"></li>
<li class="f"></li>
<li class="m"></li>
<li class="m"></li>
<li class="f"></li>
<li class="m"></li>
</ul>
</div>
<div id="cate_c3" class="cate">
<div class="name">C</div>
<ul>
<li class="f"></li>
<li class="m"></li>
<li class="f"></li>
<li class="m"></li>
<li class="f"></li>
<li class="f"></li>
</ul>
</div>