Collapse all following elements until specific tag

Question

I have a FAQ with jacked-up markup that looks like this:

<p><strong>How can I come see the animals perform?</strong><br>
Schedules and information about attending a performance can be found here:</p>
<p><a href="http://jupmingdolphins.com">Performance tickets</a></p>
<p>If no performances are listed, it means that none are scheduled in the
near future. The animals take a break between November and May.</p>

<p><strong>What's the answer to this question?</strong><br>
It's 42, of course.</p>

<h2>Header for More Questions</h2>

<p><strong>Is it true the dolphins have smartphones?</strong><br>
Yes, they use Android phones and text each other constantly.</p>
<p><b>Just kidding!</b> They are all Apple fan-fish and prefer iPhones.</p>

(etc)

And I'm trying to figure out:

1. Some CSS (and probably jQuery) to hide everything except the questions, on page load.

2. Simple jQuery where, when the user clicks on a <strong>-wrapped question, the answer slides down and appears below it. The problem is, as you can see, is that the markup is wacky (thanks to the CMS) and there can be lots of stuff between one question and another. The answers aren't wrapped in their own DIV or anything. On top of all that, there are H2 subheads throughout the FAQ, and I don't want the H2s to ever be touched/collapsed.

So I need code sort of like for the click action:

$('strong').click(function() {
   // hide or reveal all elements from $(this) down,
   // and stop when we hit next <strong> or <h2>
});

Answer 1

Edit

This is greatly complicated by the fact that the questions don't even have their own tags. So you're in the awkward spot of needing to hide a question's parent tag, but show the question itself, which is basically impossible.

To get around this problem, here is a hack I put together. It clones the questions and appends them in their own tag. But, I'd recommend trying to prevail on the authors of this markup to revise it into something more rational.

---

To hide the non-questions, it looks like you could use something like:

$("#container").children().not($("strong").parent()).not("p").hide();

To show an answer, you could probably use nextUntil:

$(this).parent().nextUntil($("strong").parent()).show();

---

FIDDLE