Jquery - toggling a nest div on click that's hidden by default

Question

I have a link that when clicked, will reveal a div below it. The div is hidden by default.

Inside of that div, there is an identical nested setup - a link that when clicked, will reveal a div beneath it.

The issue is, when the nested div is hidden by default, my jquery won't register clicks on the nested link. If the nested div is not hidden by default, everything works.

Another wrinkle of this - there will be multiple instances of the blocks below. So there could be 4 "outer-data" divs, each with their own "inner-data" divs. When the link is clicked, it should only hide the correspending "outer-data" class not all "outer-data" classes. This aspect works properly currently.

How can I get around this? Here is my code -

 $('.outer-toggler').click(function() { $(this).parent().find('.outer-data').toggle(); return false; }); // inner div toggle, does not register clicks $('.inner-toggler').click(function() { $(this).parent().find('.inner-data').toggle(); return false; }); 

 .outer-data, .inner-data { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="outer-toggler" href="#">outer link 1</a> <div class="outer-data"> ... <a class="inner-toggler" href="#">inner link 1</a> <div class="inner-data"> ... </div> </div> <a class="outer-toggler" href="#">outer link 2</a> <div class="outer-data"> ... <a class="inner-toggler" href="#">inner link 2</a> <div class="inner-data"> ... </div> </div> 

I found this issue which looks similar, but in my situation the link is hidden by default whereas his dropdown boxes are not, so his changes were still triggering the event at least - Nested jQuery toggle statements

Answer 1

Use $(this).next().toggle(); as the toggle target is the next sibling

 $('.outer-toggler').click(function() { $(this).next().toggle(); return false; }); // inner div toggle, does not register clicks $('.inner-toggler').click(function() { $(this).next().toggle(); return false; }); 

 .outer-data, .inner-data { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="outer-toggler" href="#">outer link 1</a> <div class="outer-data"> ... <a class="inner-toggler" href="#">inner link 1</a> <div class="inner-data"> ... </div> </div> <a class="outer-toggler" href="#">outer link 2</a> <div class="outer-data"> ... <a class="inner-toggler" href="#">inner link 2</a> <div class="inner-data"> ... </div> </div>