jquery filtering not floating left with category selected

I am brand new to learning about jQuery. I started with a youtube tutorial (which is a couple years old so I'm sure its a little out of date) and followed it to the tee but when I select one of my cateogry tabs the images disapear but the pictures that remain do not float to the left.

My question is what am I miss so the the category images float left when they are selected?

Here is my jsfiddle for my code.

$(document).ready(function(){
$('.category_item').click(function(){
var category = $(this).attr('id');

if(category == 'all'){
$('.icon').addClass('hide');
setTimeout(function(){
$('.icon').removeClass('hide');
}, 300);
} else {
$('.icon').addClass('hide');
setTimeout(function(){
$('.' + category).removeClass('hide');
}, 300);
}
});

});


PS: It's working on my website but for some reason the filter isn't showing for me in the jsfiddle.

1 Answer
1

You should add display none to .hide in your css, it should be:

.hide

.hide {
transform: scale(0);
width:0;
padding:0px;
transition:all 0.4s ease-in-out;
display: none; // THIS NEED TO UPDATE
}


It's work after add this display: none, check it here: https://jsfiddle.net/Lcu7h1rd/31/

display: none

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.