ansaurus

Question

jQuery show/hide for FAQ using the next() function

Answer 1

+2 A:

Use:

$(function(){
    $("a.question").click(function(){
     $(this).next().toggle();
     return false;
    }); 
});

Sarfraz 2010-05-14 14:22:28

Answer 2

+1 A:

Make sure to wrap your code in a document.ready, like this:

$(function() {
  $("a.question").click(function(){
    $(this).next(".answer").toggle();
  }); 
});

Without document.ready it's running the selector $("a.question") and not finding anything, because the links aren't there/ready yet, you can see this by doing alert($("a.question").length);. By putting it in document.ready it doesn't run the code to look for the elements until they are in the DOM and ready to go.

Your code itself works fine, see a demo here. You may also be interested in .slideToggle() if you want a nice effect, you can see it working here.

Nick Craver 2010-05-14 14:22:30

@downvoter - Helps to say what's incorrect about the answer, oh I had a typo in "you", was that it?

Nick Craver 2010-05-14 14:37:57

Answer 3

+2 A:

That looks like it should work fine.. have you tried just $(this).next().toggle()?

Jeriko 2010-05-14 14:22:38

Answer 4

+3 A:

It works for me.

You probably have some other element between the question and the answer.

If so, change it to

$(this).nextAll(".answer:first").toggle();

Alternatively, you might be running your code in the <head> tag, before the <body> is parsed.

If so, move your <script> below the question tags, or wrap it in $(function() { ... });.

SLaks 2010-05-14 14:24:23

Wow... `nextAll()`... you learn something new everyday :)

Matt 2010-05-14 14:25:48

jsbin.com <- now that's pretty cool!

Jeriko 2010-05-14 14:27:12

Yeah, I had it wrapped in <p> tags. I forgot to put that in the original question. Apologies, all.

jon_brockman 2010-05-14 14:35:53

ansaurus

tags:

views:

answers:

jQuery show/hide for FAQ using the next() function

related questions