I have a FAQ with messed-up formatting 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:
Some CSS (and probably jQuery) to hide everything except the questions, on page load.
Simple jQuery where, when the user clicks on a
<strong>-wrapped question, the answer slides down and appears below it. The issue is that the markup is not structured properly due to the CMS, with various elements separating each question. The answers do not have their own containers and there are also H2 subheads throughout which should remain untouched.
To handle the click action, I need code similar to:
$('strong').click(function() {
// hide or reveal all elements from $(this) down,
// and stop when we hit next <strong> or <h2>
});