Filter items with CSS, only. No JS! Uses :checked and ~.
A Pen by Caroline Orlando on CodePen.
Filter items with CSS, only. No JS! Uses :checked and ~.
A Pen by Caroline Orlando on CodePen.
<body> | |
<input type="checkbox" id="smartphone" class="smartphone"> | |
<label for="smartphone"><i class="fa fa-mobile"></i> Smartphones</label> | |
<input type="checkbox" id="tablet" class="tablet"> | |
<label for="tablet"><i class="fa fa-tablet"></i> Tablet</label> | |
<input type="checkbox" id="laptop" class="laptop"> | |
<label for="laptop"><i class="fa fa-laptop"></i> Laptop</label> | |
<input type="checkbox" id="desktop" class="desktop"> | |
<label for="desktop"><i class="fa fa-desktop"></i> Desktop</label> | |
<div class="smartphone tablet"> | |
<span class="smartphone"></span> | |
<span class="tablet"></span> | |
<span class="laptop"></span> | |
<span class="desktop"></span> General Mobile | |
</div> | |
<div class="tablet laptop smartphone"> | |
<span class="smartphone"></span> | |
<span class="tablet"></span> | |
<span class="laptop"></span> | |
<span class="desktop"></span> Acer | |
</div> | |
<div class="tablet"> | |
<span class="smartphone"></span> | |
<span class="tablet"></span> | |
<span class="laptop"></span> | |
<span class="desktop"></span> ASUS Computer | |
</div> | |
<div class="tablet desktop"> | |
<span class="smartphone"></span> | |
<span class="tablet"></span> | |
<span class="laptop"></span> | |
<span class="desktop"></span> Samsung | |
</div> | |
<div class="tablet"> | |
<span class="smartphone"></span> | |
<span class="tablet"></span> | |
<span class="laptop"></span> | |
<span class="desktop"></span> Motorola | |
</div> | |
<div class="tablet laptop smartphone desktop"> | |
<span class="smartphone"></span> | |
<span class="tablet"></span> | |
<span class="laptop"></span> | |
<span class="desktop"></span> Nokia | |
</div> | |
<div class="desktop"> | |
<span class="smartphone"></span> | |
<span class="tablet"></span> | |
<span class="laptop"></span> | |
<span class="desktop"></span> Micromax | |
</div> | |
<div class="laptop"> | |
<span class="smartphone"></span> | |
<span class="tablet"></span> | |
<span class="laptop"></span> | |
<span class="desktop"></span> HTC | |
</div> | |
</body> |
span { | |
font: normal normal normal 14px/1 FontAwesome; | |
display: inline-block; | |
&.smartphone { | |
.smartphone & { | |
&:before { | |
color: red; | |
} | |
} | |
&:before { | |
content: "\f10b"; | |
} | |
} | |
&.tablet { | |
.tablet & { | |
&:before { | |
color: red; | |
} | |
} | |
&:before { | |
content: "\f10a"; | |
} | |
} | |
&.laptop { | |
.laptop & { | |
&:before { | |
color: red; | |
} | |
} | |
&:before { | |
content: "\f109"; | |
} | |
} | |
&.desktop { | |
.desktop & { | |
&:before { | |
color: red; | |
} | |
} | |
&:before { | |
content: "\f108"; | |
} | |
} | |
} | |
input { | |
~ div { | |
display: none; | |
} | |
&:checked { | |
~ div { | |
display: none; | |
} | |
} | |
} | |
input { | |
&.smartphone { | |
&:checked { | |
~ div { | |
&.smartphone { | |
display: block | |
} | |
} | |
} | |
} | |
&.tablet { | |
&:checked { | |
~ div { | |
&.tablet { | |
display: block; | |
} | |
} | |
} | |
} | |
&.laptop { | |
&:checked { | |
~ div { | |
&.laptop { | |
display: block; | |
} | |
} | |
} | |
} | |
&.desktop { | |
&:checked { | |
~ div { | |
&.desktop { | |
display: block; | |
} | |
} | |
} | |
} | |
} |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> |