Task: On click of li navigation filter show and hide content with a transitional fadein fade out.
Problem I'm just guessing and checking on where to place this fadein//fadeout transition. Furthermore, I feel like my code is too inefficiency because I'm using 4 conditional statements. Would stack lead me in creating a solution to improve the overall logic of this script so I can just make a pretty transition :c?
LIVE CODE
jQuery Script
$(document).ready(function () {
//attach a single click listener on li elements
$('li.navCenter').on('click',
function () {
// get the id of the clicked li
var id = $(this).attr('id');
// match current id with string check then apply filter
if (id == 'printInteract') {
//reset all the boxes for muliple clicks
$(".box").find('.video, .print, .web').closest('.box').show();
$(".box").find('.web, .video').closest('.box').hide();
$(".box").find('.print').show();
}
if (id == 'webInteract') {
$(".box").find('.video, .print, .web').closest('.box').show();
$(".box").find('.print, .video').closest('.box').hide();
$(".box").find('.web').show();
}
if (id == 'videoInteract') {
$(".box").find('.video, .print, .web').closest('.box').show();
$(".box").find('.print, .web').closest('.box').hide()
$(".box").find('.video').show();
}
if (id == 'allInteract') {
$(".box").find('.video, .print, .web').closest('.box').show();
}
});
HTML Selected
<nav>
<ul class="navSpaces">
<li id="allInteract" class="navCenter">
<a id="activeAll" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>all</h3></div></a>
</li>
<li id="printInteract" class="navCenter">
<a id="activePrint" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/print.gif" /><h3>print</h3></div></a>
</li>
<li id="videoInteract" class="navCenter">
<a id="activeVideo" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/video.gif" /><h3>video</h3></div></a>
</li>
<li id="webInteract" class="navCenter">
<a id="activeWeb" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/web.gif" /><h3>web</h3></div></a>
</li>
</ul>
ps. Sorry for the newbie question
