Using next() from link outside div

Question

I have HTML structured as:

<h2>Title 1 <span class="open">&nbsp;</span></h2>

<div class="licensesection" id="licensepage1">
//stuff
</div>


<h2>Title 2 <span class="open">&nbsp;</span></h2>

<div class="licensesection" id="licensepage2">
//stuff
</div>

And jQuery (loaded after HTML):

$('.open').click(function () {
$(this).next('.licensesection').slideToggle('slow');
$(this).toggleClass('active');
});

But the addition of next() is preventing it from working. I also tried

.next('div.licensesection')

but that doesn't work either. Am I misusing the next() selector?

Answer 1

As I mentioned, next() is for siblings:

next() - Get the immediately following sibling of each element in the set of matched elements.

The <span> is a child element of the <h2> which itself is the previous sibling of the <div>, so use parent() to get to that <h2>, and then next() to get to the <div>, like so:

$('.open').click(function () {
  $(this).parent().next('.licensesection').slideToggle('slow');
  $(this).toggleClass('active');
});

jsFiddle here.