jQuery and AJAX Tutorials 36 | AJAX Filter Revert to the Original State Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Ilias and
this is your 36 tutorial and in this
tutorial we want to add some very
something very important because look
now we can switch between the categories
but we cannot go back to the previous
state where we have all the all the
elements listed on the on screen so what
I wanna have I want to have a class a
new category iCal code all so I'll
expand the filter I create a new list
entry and I'll just say all like this
and I want this all to be default so the
easiest way to do that we can already
wrote this all right here we can copy
this all to every class to every class
property so can basically add the class
of all to every element
hold on now we have this n sorry get rid
of this n so now it's it should work
well now when I click at all ah
everything will be displayed on the
screen because every every portfolio
entry has class of all but when we load
the page on the beginning we want these
this all to be highlighted we can just
go ahead and write a script for this to
make it highlight it just like add class
of active at the beginning but well it's
not the easiest way because we can just
go ahead and go to this HTML structure
and add this active class by default so
and by default this old class is
highlighted and now we can switch
between the images like we did before
and we can go back to this this is all
which is pretty cool and we also have
this text descriptions below everywhere
and if you don't like the idea that this
images jump a little bit when
usage between the categories well it's
because they take time to fade in and to
fade out that's why just get this effect
of jumping you can go ahead and instead
of animating the elements you can just
simply hide them and you know in one of
the first of tutorials in this tutorial
sets I taught you guys this height and
show functions and they basically do
hide or show the elements and now you
guys look for function feet fading off
right out right here for example and you
can replace this fade out through this
height and it only will be hidden and
fading can be replaced by show like this
so now when I stitch between the
categories they don't jump anymore they
just appear right away so as I said you
can pick your pick your option you can
either have show and hide or fade
unified out which is very easy to to
memorize all right so what else can we
add to this tutorial by the way I forgot
to tell you you know this arrows which I
have here this images they are actually
Google Chrome standard arrows for Mac
for example in Mac if you slide with two
fingers to the right or a magic mask
with one finger to the right you will
see this arrow right here and I just
simply made a screenshot of it so I hope
Google won't sue me for this force for
stealing their their arrows but anyway I
don't think is going to be a problem so
now I think that's it for this tutorial
because I we only have one minutes and
we won't make any more in one minute so
in this tutorial I'll figure out some
cool stuff we are going to do and I hope
you guys like this one so see you guys
the next one have a nice day