Jquery How To Get Element Id Based On What Was Clicked And Get Child Element Id

So I have a strange set-up I'm trying to figure out how to get the result I have in my head. I feel like I am very close I just don't know 100% how jQuery operates. I have applied

Solution 1:

The logic is sound, but you're not using the power of jQuery which is causing the duplication. Since they all serve a similar purpose of a header than contains a hidden span, you want to target them all with a common class to remove the redundancy which you already have in your code. This should handle everything.

$(document).ready(function(){
   $(".workSect").click(function() {
       $(this).find(".innerSect:first").css({'visibility' : 'visible', 'display' : 'inline'});
    });
});

It also looks like there was an error in your HTML causing problems. I fixed it with the correct jQuery here https://jsfiddle.net/xgp0txzz/

Solution 2:

So use a class instead of ids and use find to get the child element that is inside of the one that was clicked.

$(".outerSectLogo").click(function() {
    $(this).find(".innerSectLogo").css({'visibility' : 'visible', 'display' : 'inline'});
});

Solution 3:

I think what you can do is to assign a common class to all the outer elements like

<div id="outerSectLogo" class="innerdisplay <other-classes>"></div>

then

$('.innerdisplay').click(function(){
    $("#" + this.id.replae('outer', 'inner')).css({'visibility' : 'visible', 'display' : 'inline'});
})