javascript - jQuery-line $(this).nextAll('.toggled:first') works in Stack Snippet and JSFiddle, but not on site

Question

I can't figure out why the following code doesn't work on my site, but works great on JSFiddle, as well as here in a Stack Snippet:

(function($) {
  $(document).ready(function() {
    $
    $(".toggler").click(function() {
      $(this).next().slideToggle("slow");
    }).next().hide();
    $(".togglerLink").click(function() {
      $(this).nextAll('.toggled:first').fadeIn("fast");
    });
  });
})(jQuery)

.toggler {
  color: orange;
  text-decoration: underline
}
.toggler:hover {
  color: orange;
  cursor: pointer;
  text-decoration: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The <a class="togglerLink" href="#link">link</a> here, has a destination inside the Toggler.
<br>
<br>

<p class="toggler">Toggle here.</p>
<div class="toggled">In JSFIddle, or in a Stack Snippet (SO), this code is working fine. Even when the Toggler is closed, the link automatically opens the Toggle that contains it destination. --- So, then what could be going wrong, implementing this into a website?
  <br>
  <br><span id="link" style="color:green">Link-destination.</span>
  <hr>
</div>

Answer 1

The nextAll() function only checks for elements on the same or deeper node-level in the DOM.

So your code will work with the following HTML structure:

The <a class="togglerLink" href="#link">link</a> here, has a destination inside the Toggler.
<div class="toggled">
    <span id="link" style="color:green">Link-destination.</span>
</div>

But not with something like this:

<div>
    The <a class="togglerLink" href="#link">link</a> here, has a destination inside the Toggler.
</div>
<div class="toggled">
    <span id="link" style="color:green">Link-destination.</span>
</div>

The solution is to have a more specific selector in your jQuery code:

$(".togglerLink").click(function() {
    var id = $(this).attr('href'); // will return '#link', which we can use as ID selector
    $(id).parents('.toggled').fadeIn("fast"); // The $(id) will select the element with ID 'link' and the 'parents()' will select the parent(s) with class 'toggled'.
});