Question

LIVE SAMPLE
I’m tryign to write a basic click filter script in jQuery to find 3 classes print, video, web and toggle them on and off. I have 1 click listener referencing 4 ids:#printInteract, #webInteract, #videoInteract, #allInteract

Problem
After click I want to toggle the parent .box that containes the one or more of the classes the toggle. Unfortunatly, my click event removes the refernced ids and not the parent .box

*how can I grab the parent(it’s not the direct parent || check htmlbox) .boxand hide/show it?

jQuery

$(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');

    //conditional cases
    if (id == 'printInteract') {
        $(".box").find('.web, .video').hide();
        $(".box").find('.print').show();
    }
    if (id == 'webInteract') {
        $(".box").find('.print, .video').hide();
        $(".box").find('.web').show();
    }
    if (id == 'videoInteract') {
        $(".box").find('.print, .web').hide();
        $(".box").find('.video').show();
    }
    if (id == 'allInteract') {
        $(".box").find('.video, .print, .web').show();
    }
});
});  

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>
    </ul>
</div>

html navigation

  <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>

PS: would anyone know how to add a fadein out transition to this also? 🙂

Answer 1

Perhaps you’re looking for .closest() :

$(this).closest('.box').hide();