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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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.
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.
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.
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:
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.
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
In order to filter the content, define the zero value for all other content except the content of selected label.
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.
Фильтр блоков на чистом HTML и CSS. Серьезным решением это назвать сложно, но чтобы посмотреть на возможности HTML и CSS очень даже ничего! В принципе, можно использовать на каком-нибудь простом сайте за 500р, созданном на коленке с телефона пока ехал в электричке.
Доброго времени суток. Вам, наверное, тоже нравятся СSS3 и трюки, позволяющие не использовать javascript. Но я нигде не встречал фильтрации списка элементов, поэтому хочу рассказать о такой возможности. Допустим, элементы относятся к разным категориям (возможно, как много-ко-много), и нам нужно управлять видимостью элементов тех или иных категорий в списке без использования JS.
По-простому
Допустим, фильтруем элементы по цвету. Для управления списком будут использоваться кнопки, реализуемые парами элементов input и label.
Чекбоксы имеют состояние, которое в CSS мы можем использовать псевдоклассом :checked. Это как раз то, что нам нужно. При нажатии на label определенного цвета чекбокс будет «выключаться», а элементы этого цвета — пропадать из списка. Элементы незамысловатые:
Сама фильтрующая а связь между чекбоксами и элементами списка реализуется с помощью тильда-селектора «~». Для работы этого приема необходимо, чтобы input’ты находились до элементов, причем выше по дереву.
Сам пример (полноценно, хоть и скромно оформленный) можно посмотреть в живую.
Много-ко-много
А что, если элементы могут находятся в нескольких категориях сразу? То есть, если нам нужна фильтрация по тегам? Пускай у нас будут ткани, которые есть в ассортименте в нескольких цветах:
Заметим, что фильтр будет работать по принципу логического «ИЛИ». То есть, элемент будет виден, пока активен хотя бы один его тег. Если мы хотим, чтобы он работал как логическое «И», нужно изменить CSS, использовав псевдокласс :not.
input#red:not(:checked) ~ .container .item.red < display: none; >.item < display: block; /* другие правила */ >
Работу третьего фильтра можно увидеть здесь.
Очевидно, что область применения такого хака не очень велика… но он прекрасно справляется с демонстрацией мощи тильда-селектора и псевдоклассов, и может, надоумит кого на полезное применение!
I will explore two different methods of applying the same filters to the same data, one based in JavaScript, the other based in CSS alone.
Let’s start by creating the html for the filters and the collection of animals, we’ll represent the filters as buttons and create a div for each animal:
Filters
Animals
Dog
Eagle
Cow
Shark
Canary
Human
Salamander
JS Filters — the more traditional way
There are, of course a lot of ways to filter using JavaScript. For this, I want to make sure that it’s flexible enough to cover anything I add in later because I don’t want to have to come back to edit the JS function. To do this I know that I’ll need a way to identify which animals to include/exclude for each filter, and I’ll want the HTML to do most of the heavy-lifting so I can add to the collection solely by adding HTML.
HTML
To start, I’ll add a class to each animal div with the name of the relevant filter(s). This will be my identifier.
Animals
Dog
Eagle
Cow
Shark
Canary
Human
Salamander
Notice that the last item, Salamander, can walk or swim. We’ll need to make sure that our filter function can handle items belonging to multiple criteria.
Next, I also know that I’ll need to add an event listener to each of the filters to call my JS function. Somehow, I want to pass the filter value to the function as well. We could write the event listener call like onclick=»filterAnimals(‘walks’)» but it might be nice to be able to grab the value of the filters in other code too, so let’s instead put the value as an HTML data- attribute and use that in our function instead. That has an added side effect of making the code a little more readable as well.
Filters
CSS
Now it’s time to determine how to actually get the items to filter. In CSS, we can essentially remove an element from the page by setting it to display: none . Let’s create a class that has that setting, so our JS code can simply add/remove that class as needed. Well that was easy.
JavaScript
What’s left to do? When we select a filter, our JavaScript only needs to go through the animals to see if they contain the filter as a class. If they do, they should not get the .hidden class, if they do not, then they do get that class added.
Great! Now our filters should work, let’s take a look.
Notice our troublemaker Salamander does show up in both the walks and the swims filter, that’s great news! However, look at the all filter. not so good. We know there is data so surely there should be something there right? Unfortunately, we don’t have an .all class in any of our artifacts, so that filter won’t match anything. We could add .all to every animal, but it would be much cleaner and easier for our JavaScript to handle that. We just need an if/else statement to determine whether the filter is «all» or something more specific:
// code to add: if (filter === '*') < animals.forEach(animal =>animal.classList.remove('hidden')); > // full JS code: function filterAnimals(e) < const animals = document.querySelectorAll(".list div"); let filter = e.target.dataset.filter; if (filter === '*') < animals.forEach(animal =>animal.classList.remove('hidden')); > else < animals.forEach(animal =>< animal.classList.contains(filter) ? animal.classList.remove('hidden') : animal.classList.add('hidden'); >); >; >;
There we go, now we’re all set. If we want to add something later, like an ostrich, we just need to put in a line of HTML:
Ostrich
Everything else is taken care of for us like magic.
CSS Filter
Let’s see how to implement the same thing, but without using any JavaScript at all. It involves a neat CSS trick!
HTML
First thing, we don’t need any event listeners anymore since there’s no JS functions to call, so let’s get rid of those. Otherwise everything is the same.
Filters
Animals
Dog
Eagle
Cow
Shark
Canary
Human
Salamander
CSS
But how can CSS actively filter for us? The key to that question is the «actively» part. When a user clicks a button, it is in focus until the user clicks elsewhere. So, we can use that to our advantage by adding a :focus selector to each button. We can also access our data- attributes using CSS to determine which filter to apply when a given button is in focus. button[data-filter=»walks»]:focus
We also know we need the animals that are filtered out to receive the display: none attribute.
button[data-filter="walks"]:focus
But the challenge is how to actually select the animals, rather than the button, when we have the button in focus? We can use ~ to select «elements that follow an element at the same level.» This is officially called the «general-sibling-combinator» More Info Here.
The only issue is that this requires the animals and the filters to share a parent element, which they currently do not, so we’ll need to make a minor update to our HTML to make that happen by combining everything under a single div, let’s give it a .filteredList class.
With that change made, we can now use ~ to select «divs sharing the same parent as the selected button, whose class contains the data-filter attribute value from the button.» Here’s how that looks ( *= means ‘contains’ where = would require an exact match):
It Works!! Keep in mind that if you click anywhere else on the page, the filters will be removed (because the button is out of focus). And finally, how would we add our new ostrich animal? Exactly the same way:
Ostrich
Overall, the JavaScript function is probably going to be the better way to go in nearly all situations, but I thought this was a cool CSS trick and it could be useful if you want a lightweight quick-filter feature.
