[Solved] jQuery-line $(this).nextAll(‘.toggled:first’) works in Stack Snippet and JSFiddle, but not on site

by


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'.
});

1

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