Question

I’m setting up a very straightforward FAQ page with jQuery. Like so:

<h2>What happens when you click on this question?</h2>
<p>This answer will appear!</p>

This is all inside a very specific div, so I’ll be selecting the header with $('#faq h2'). Simple, right? Click on the H2, and use this.next() to make the next paragraph show up.

(The caveat with this page is that a non-programmer will be maintaining it, which is why I’m not using classes: there’s no guarantee that any new entries would have the right classes in them.)

So! The problem:

<h2>What happens when you click on the next question?</h2>
<p>That is an interesting conundrum.</p>
<p>Because the maintainer is kind of long-winded</p>
<p>and many answers will span a few paragraphs.</p>

So how, without adding in divs and classes and whatnot, can I have my this.next() routine select everything between the question-that-was-clicked-on and the next question (H2 header)?

Answer 1

Interesting problem. First let me say that I think the best strategy is to enclose the whole answer in a div and then the problem becomes trivial to solve:

<h2>Question here</h2>
<div>
<p>Answer here</p>
</div>
</h2>Next Question</h2>
...

with:

$(function() {
  $("h2").click(function() {
    $(this).next().toggleClass("highlighted");
  });
});

But that being said, it is solvable without that.

$(function() {
  $("h2").click(function() {
    $(this).nextAll().each(function() {
      if (this.tagName == 'H2') {
        return false; // stop execution
      }
      $(this).toggleClass("highlighted");
    });
  });
});

Not supremely elegant but it’ll work.

Note: This assumes the questions are siblings. If they are not it gets much more complicated.