for page 003 can you help me with the 'data-filter=' and the 'class=' because i really don't understand it. thank you in advance
So basically thereâs two important elements when using the filter - the icons and the checkboxes which you use to decide which icons you want to display.
The checkboxes are represented in the code like this:
The above is the code for one checkbox.
The icons are represented like this:
That is the code for one icon.
So, essentially whenever you click a checkbox the code finds the part that says âdata-filter=âââ and takes whatever is between those quotation marks. It then hides any icons which do not have a matching class.
For example, say I was making a page listing a lot of pets. I might want to filter out only cats. In this case I would have a checkbox for âcatsâ like so:
data-filter=âcatâ>Cat
I have highlighted in bold the data-filter part where you can see Iâve added âcatâ.
Any icon of a cat would then look a bit like this:
You can see that the class=âcatâ matches the data-filter=âcatâ. This means when you click the checkbox above which has data-filter=âcatâ the code will find this icon and make sure it is visible.
Of course the cat might have many different attributes - you might also want to filter by the fact it has black fur and green eyes, so your icon code might end up looking more like this:
class=âcat blackfur greeneyesâ>
However, whenever you click that checkbox above it will see that data-filter is set to âcatâ and find any icons which also have a matching âcatâ class.
I hope this makes sense and clears things up! Iâm not great at explaining I know.
germansingergirl
pixelskylines
origamiaround
gummygunk
dededos
izzy806