Свернуть все последующие элементы до определенного тега

У меня есть FAQ с развороченной разметкой, которая выглядит так:

<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 the answer to this question?</strong><br>
It 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)

И я пытаюсь понять:

1. Некоторые CSS (и, вероятно, jQuery), чтобы скрыть все, кроме вопросов, при загрузке страницы.

2. Простой jQuery, где, когда пользователь нажимает на вопрос <strong> -wrapped, ответ скользит вниз и появляется под ним. Проблема, как вы можете видеть, в том, что разметка неаккуратная (благодаря CMS), и между одним вопросом и другим может быть много материала. Ответы не завернуты в их собственный DIV или что-то еще. Кроме всего прочего, во всех часто задаваемых вопросах есть подзаголовки H2, и я не хочу, чтобы H2s когда-либо касались/рушились.

Поэтому мне нужен код вроде как для действия click:

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