Question

I have the following code:

$(".main").click(function() {
    $(this).toggleClass("classA").toggleClass("classB");
    $(".secondary").toggleClass("classC").toggleClass("classD");
));

$(".secondary").click(function() {
    $(".secondary").toggleClass("classC").toggleClass("classD");
));

And HTML:

<div class="main"></div>

<div>
    <div class="secondary"></div>
    <table class="tbl"></table>
</div>

<div>
    <div class="secondary"></div>
    <table class="tbl"></table>
</div>

Currently it allows me to toggle class when each “secondary” element is clicked individually or change for all secondary when “main” is clicked. I need to add show/hide table in appropriate div when corresponding “secondary” or “main” is clicked. Having difficulty targetting. Tried but failed:

$(this).closest(".tbl").toggle();

Answer 1

try this:

$(".secondary").click(function() {
    $(".secondary").toggleClass("classC").toggleClass("classD");
    $(this).parent().children(".tbl").toggle();
 //or this: $(this).next(".tbl").toggle();
));