Jquery-line $(this).nextall('.toggled:first') Works In Stack Snippet And Jsfiddle, But Not On Site

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: What is not working then is: The link doesn't

Solution 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 <aclass="togglerLink"href="#link">link</a> here, has a destination inside the Toggler.
<divclass="toggled"><spanid="link"style="color:green">Link-destination.</span></div>

But not with something like this:

<div>
    The <aclass="togglerLink"href="#link">link</a> here, has a destination inside the Toggler.
</div><divclass="toggled"><spanid="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) withclass'toggled'.
});