I recently implemented a category filter feature that hides images I don't need. When I click on the car logo at the top, I want to hide every element that doesn't have the "car" id. However, I'm facing an issue where hidden images still retain their dimensions.
For example:
https://i.sstatic.net/Exc5E.png
https://i.sstatic.net/1dNQJ.png
https://i.sstatic.net/H3JKQ.jpg
CSS code:
.block_container{
flex-wrap: wrap;
width: 632px;
height: 350px;
overflow-y: scroll;
background-color: rgba(201, 201, 201, 0.5);
border-radius: 10px;
box-sizing: border-box;
display: block;
}
.game_item{
margin: 13px;
width: 176px;
height: 100px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-sizing: border-box;
float: left;
transition: all 0.4s ease-in-out;
}
.hide{
transform: scale(0);
width: 0;
height: 0;
padding: 0;
transition: all 0.4s ease-in-out;
}
JavaScript code:
$(document).ready(function(){
$('.category_item').click(function(){
var category=$(this).attr('id');
if(category=='all'){
$('.game_item').addClass('hide');
setTimeout(function(){
$('.game_item').removeClass('hide');
}, 300);
} else{
$('.game_item').addClass('hide');
setTimeout(function(){
$('.'+category).removeClass('hide');
}, 300);
}
});
});