The content filter feature helps users to quickly find the relevant content for a specific category. Basically, this feature requires a JavaScript function to filter content. But in this tutorial, we are going to create a pure CSS content filter feature along with HTML radio input.
The trick behind that, we’ll create HTML radio input and use their labels as category names. Then we’ll create different div elements with various color classes related to the category. After that, we’ll style the labels as category filter buttons, get the input checked values in CSS, and show the relevant content with respect to the checked category.
You can check the final output on the demo page to test the content filter functionality. There you can see the filtering animation that smoothly shrinks and disappear the other content except for the selected category. You can easily customize the code to fit it into your project. So, let’s get started with HTML to create content filter functionality.
HTML Structure for Content Filter
In HTML, create radio inputs and their labels with unique IDs. Likewise, create div elements with a class name "tile" and define another class with respect to the id of the input. Wrap all these elements in a div and define its class name "container". So, the HTML structure for the content filter looks like below:
<div class="container"> <input type="radio" id="blue" name="color" /> <label for="blue">BLUE</label> <input type="radio" id="red" name="color"/> <label for="red">RED</label> <input type="radio" id="green" name="color"/> <label for="green">GREEN</label> <input type="radio" id="reset" name="color"/> <label for="reset">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 class="tile red">6</div> <div class="tile red">7</div> <div class="tile green">8</div> <div class="tile blue">9</div> <div class="tile green">10</div> <div class="tile red">11</div> <div class="tile green">12</div> <div class="tile blue">13</div> <div class="tile blue">14</div> <div class="tile green">15</div> <div class="tile red">16</div> </div>
If you wanted to make the category filter functionality, place the name of the category in the label tag and place relevant content in tile divs. You can add as much content as you need, just follow the same structure as given in the above HTML.
CSS Style to Filter Content
In CSS, first of all, target the "container" element and define its 90% width along with the margin "0 auto" in order to align the container to the center of the page.
.container {
width:90%;
margin:0 auto;
}
We don’t need to show the radio inputs to the users. So, target the radio input and use the CSS display "none" property to hide it.
input[type="radio"] {
display:none;
}
The "label" tags are the elements that we want to show as filter buttons. So, target the label element and define its width, background color, text-align, box-shadow, and color property as described below:
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:0.5%;
margin:0.5%;
margin-bottom:30px;
cursor:pointer;
}
The "tile" class is the content element. You can style it according to your needs. However, if you wanted to style the tiles just like the demo then define the 23% width, 100px height, and define the margin & padding values. Likewise, use the CSS left float property to make the grid of items.
.tile {
width:23%;
height:100px;
float:left;
transition:all 1s;
margin:0.5%;
padding:0.5%;
}
.green {
background:#66dd99;
}
.blue {
background:#6666ff;
}
.red {
background:#ff4466;
}
In order to make the selected category active, target the label element that comes just after the input using the following CSS rules and define its background color. You can also specify other CSS values if you want to customize the selected label.
input[type="radio"][id="blue"]:checked + label {
background:#6666ff;
}
In order to filter the content, define the zero value for all other content except the content of selected label.
input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;
}
Similarly, define the background color for red active category and hide all other content except selected label.
input[type="radio"][id="red"]:checked + label {
background:#ff4466;
}
input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;
}
Likewise, define the background color for green active label and show relevant content.
input[type="radio"][id="green"]:checked + label {
background:#66dd99;
}
input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;
}
That’s all! I hope this tutorial was helpful to create a content filter using pure CSS. If you have any questions or suggestions, let me know by comment below.