I made a category filter div (block_container) which shows everything in the div by default, the thing is that I want this div to be hidden unless I click on a category.
In other words, I want to add the ".hide" class to the ".block_container" div as long as I don't choose a category from the "container" div.
Category selector div:
$(document).ready(function() {
$('.category_item').click(function() {
var category = $(this).attr('id');
if (category == 'all') {
$('.gameCard').addClass('hide');
setTimeout(function() {
$('.gameCard').removeClass('hide');
}, 300);
} else {
$('.gameCard').addClass('hide');
setTimeout(function() {
$('.' + category).removeClass('hide');
}, 300);
}
});
});.hide {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="container">
<p class="category_item" id="car"><img class="icons" src="icons/car.png" alt=""></p>
<p class="category_item" id="cooking"><img class="icons" src="icons/cooking.png" alt=""></p>
<p class="category_item" id="shooting"><img class="icons" src="icons/shooting.png" alt=""></p>
<p class="category_item" id="racing"><img class="icons" src="icons/racing.png" alt=""></p>
<p class="category_item" id="dressup"><img class="icons" src="icons/dressup.png" alt=""></p>
<p class="category_item" id="puzzle"><img class="icons" src="icons/puzzle.png" alt=""></p>
<p class="category_item" id="kids"><img class="icons" src="icons/kids.png" alt=""></p>
<p class="category_item" id="strategy"><img class="icons" src="icons/strategy.png" alt=""></p>
<p class="category_item" id="action"><img class="icons" src="icons/action.png" alt=""></p>
<p class="category_item" id="multiplayer"><img class="icons" src="icons/multiplayer.png" alt=""></p>
<p class="category_item" id="sport"><img class="icons" src="icons/sport.png" alt=""></p>
</div>
<!-- the div that I want to be hidden by default: -->
<div class="block_container">
<a href="gamenotavailable.html">
<div class="gameCard car"><img class="game_item car" src="gamescat/carGames/asettoCorsa.jpg">
<div class="gameName">Ascetto Corsa</div>
<div class="gameDesc">Racing simulator</div>
<div><img class="starsImg" src="stars/3stars.png"></div>
</div>
</a>
<a href="gamenotavailable.html">
<div class="gameCard action"><img class="game_item action" src="gamescat/actionGames/cosmicBreak.jpg">
<div class="gameName"> Cosmic Break</div>
<div class="gameDesc">A Cosmic Universe!</div>
<div><img class="starsImg" src="stars/4stars.png"></div>
</div>
</a>
<a href="gamenotavailable.html">
<div class="gameCard cooking"><img class="game_item cooking" src="gamescat/cookGames/calico.jpg">
<div class="gameName">Calico</div>
<div class="gameDesc">A day-in-the-life game! </div>
<div><img class="starsImg" src="stars/3stars.png"></div>
</div>
</a>
<a href="gamenotavailable.html">
<div class="gameCard dressup"><img class="game_item dressup" src="gamescat/dressupGames/kidGilantes.jpg">
<div class="gameName">Kid Gilantes</div>
<div class="gameDesc">Your own style</div>
<div><img class="starsImg" src="stars/3stars.png"></div>
</div>
</a>
<a href="gamenotavailable.html">
<div class="gameCard kids"><img class="game_item kids" src="gamescat/kidsGames/bloons.jpg">
<div class="gameName">Bloons</div>
<div class="gameDesc"></div>
<div class="gameDesc">Family Friendly Battles</div>
<div><img class="starsImg" src="stars/3stars.png"></div>
</div>
</a>
<a href="gamenotavailable.html">
<div class="gameCard multiplayer"><img class="game_item multiplayer" src="gamescat/multiGames/astelliaRoyal.jpg">
<div class="gameName">Astellia Royal</div>
<div class="gameDesc">Classic 3D MMORPG</div>
<div><img class="starsImg" src="stars/5stars.png"></div>
</div>
</a>
<a href="gamenotavailable.html">
<div class="gameCard puzzle"><img class="game_item puzzle" src="gamescat/puzzleGames/dungeon2.jpg">
<div class="gameName">Dungeon 2</div>
<div class="gameDesc">spectacular puzzle game</div>
<div><img class="starsImg" src="stars/4stars.png"></div>
</div>
</a>
<a href="gamenotavailable.html">
<div class="gameCard racing"><img class="game_item racing" src="gamescat/raceGames/cubeRacer.jpg">
<div class="gameName">Cube Racer</div>
<div class="gameDesc"> racing game with cubes!</div>
<div><img class="starsImg" src="stars/3stars.png"></div>
</div>
</a>
<a href="gamenotavailable.html">
<div class="gameCard shooting"><img class="game_item shooting" src="gamescat/shootingGames/bioshock.jpg">
<div class="gameName">Bioshock</div>
<div class="gameDesc">A City in the Sky...</div>
<div><img class="starsImg" src="stars/3stars.png"></div>
</div>
</a>
<a href="gamenotavailable.html">
<div class="gameCard sport"><img class="game_item sport" src="gamescat/sportGames/dirtRally.jpg">
<div class="gameName">Dirty Rally</div>
<div class="gameDesc">An authentic rally game</div>
<div><img class="starsImg" src="stars/2stars.png"></div>
</div>
</a>
<a href="gamenotavailable.html">
<div class="gameCard strategy"><img class="game_item strategy" src="gamescat/strategyGames/ageOfEmpires.jpg">
<div class="gameName">Age Of Empires</div>
<div class="gameDesc">Real-time strategy game</div>
<div><img class="starsImg" src="stars/3stars.png"></div>
</div>
</a>
</div>
