Why jQuery next can't find the next div?

Question

I want to create a page for FAQs and used jQuery to show each answer. But it does not work.
The format of each question-answer is like this:

<div><a href="javascript:void(0)" class="expand">First Question</a></div>
<div class="answer" style="display:none">First Answer</div>  

And the jQuery code that I have used is:

$(".expand").click(function(){
    $(this).next('.answer').slideToggle();
});

Is it wrong? You can see its jsFiddle too.

Answer 1

The two elements are not at the same level for next() to work.

Try this:

$(".expand").click(function(){
    $(this).parent().next('.answer').slideToggle();
});

Here is an updated fiddle for your reference

Answer 2

Because jQuery.next() grabs siblings, the div you're trying to get is the parent's sibling, not the sibling.

Answer 3

Well $(this) is the a-element, and there are no siblings to that element. If you want the div, use parent:

$(this).parent().next()