Result
クリックすると該当するコンテナを除いて非表示になる、というコンテンツフィルターです。
radioのchecked判定を使用します。
css
input[type="radio"] {/*input要素は非表示にしておく*/ display:none; } label {/*label装飾*/ width:23%; float:left; text-align:center; background:#ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); color:#222222; padding:2% 0.5%; margin:0.5%; margin-bottom:30px; cursor:pointer; } input[type="radio"][id="blue"]:checked + label {/*青が選択されたときのlabelの色*/ background:#0092ff; } input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green { /*id="blue"のradioボタンにチェックが入ってる場合は.red、.greenのclassを持ったコンテナを非表示*/ width:0; height:0; padding:0; margin:0; opacity:0; } input[type="radio"][id="red"]:checked + label {/*赤が選択されたときのlabelの色*/ background:#ea4335; } input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green { /*id="red"のradioボタンにチェックが入ってる場合は.blue、.greenのclassを持ったコンテナを非表示*/ width:0; height:0; padding:0; margin:0; opacity:0; } input[type="radio"][id="green"]:checked + label {/*緑が選択されたときのlabelの色*/ background:#75bd3f; } input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red { /*id="green"のradioボタンにチェックが入ってる場合は.blue、.redのclassを持ったコンテナを非表示*/ width:0; height:0; padding:0; margin:0; opacity:0; } .tile {/*各コンテナのスタイル*/ width:23%; height:100px; float:left; transition:all 1s; margin:0.5%; padding:0.5%; } .green { background:#75bd3f; } .blue { background:#0092ff; } .red { background:#ea4335; }
html
<div class="container"> <input type="radio" id="blue" name="color" /> <label for="blue">青</label> <input type="radio" id="red" name="color"/> <label for="red">赤</label> <input type="radio" id="green" name="color"/> <label for="green">緑</label> <input type="radio" id="reset" name="color"/> <label for="reset">全て</label> <div class="tile blue">1</div> <div class="tile red">2</div> <div class="tile blue">3</div> <div class="tile green">4</div> <div class="tile blue">5</div> . . . </div>