Question

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>

BOX HTML

<div class="box">
<h1 title="Light me up"></h1>
<div class="innerbox">
    <figure>
        <img src="" />
    </figure>
    <ul class="categorySelect">
        <li class="print"></li>
        <li class="video"></li>
        <li class="web"></li>
    </ul>
</div>

ps. Sorry for the newbie question

Answer 1

You can simplify your code and add transitions like this:

$(document).ready(function () {
    //attach a single click listener on li elements
    $('li.navCenter').on('click', function () {
        var all = $(".box").find('.video, .print, .web');
        var activeCls = "." + this.id.replace("Interact", "");
        if (activeCls == ".all") {
            all.closest('.box').show();
        } else {
            var active = $(".box").find(activeCls);
            active.closest('.box').show();
            all.not(active).closest('.box').hide();
        }
    });
});

When you have this working, you can substitute a jQuery transition of your choice for the .show() and .hide() calls.

I have assumed that you want to hide/show the .box container for each item, but without seeing the real page HTML for the content you’re hiding and showing, I can’t be sure that’s what you want to do. Whatever you hide/show you will want to be consistent in both the hide() and the show() which your original code is not.

When selecting a transition to use, you will need to use something that works well when removing/adding multiple items. fadeIn() and fadeOut() will probably not work well that way because when the item finally fades out, the remaining items will jump around. I’m not sure what will work best. Perhaps animating the width to zero.