CODEWITHSUNDEEP
javascriptjqueryfindjquery-selectorselement
Mohammad Saberi
Mohammad Saberi

Reputation: 13166

Why jQuery next can't find the next div?

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.

Upvotes: 3

Views: 22181

Answers (3)

Peter van der Wal
Peter van der Wal

Reputation: 11806

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

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

Upvotes: 2

karthikr
karthikr

Reputation: 99650

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

Upvotes: 19

Cameron Askew
Cameron Askew

Reputation: 1413

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

Upvotes: 3

Related Questions