jQuery: How to select the next element with name-xyz?
- by Shpigford
I'm trying to build a really simple generic toggle functionality where the toggling "switch" has a class of .toggle and then I want it to toggle() the next element that has the class .toggle-content.
Example HTML:
<p>
<a href="#" class="toggle">Toggle the thing</a>
</p>
<p class="toggle-content hidden">I'm totally hidden right now</p>
So right now I'd toggle that with:
$(".toggle").click(function() {
$(this).parent().next('.toggle-content').toggle();
});
The problem is if the .toggle class is any deeper in the DOM, I have to keep tacking on more parent()'s depending on how deep it is/isn't.
So how can I just select the next instance of .toggle-content without having use a bunch of parent()'s and next()'s?