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

Question

У меня есть Справка с измученными вверх разметками, выглядит следующим образом:

<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) 

И я пытаюсь выяснить:

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

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

Так мне нужен код вроде как для действия мыши:

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

Answer 1

Редактировать

Это значительно осложняется тем, что вопросы, даже не имеют свои собственные теги. Таким образом, вы находитесь в неудобном месте, когда вам нужно скрыть родительский тег вопроса, но покажите сам вопрос, что в принципе невозможно.

Чтобы обойти эту проблему, here is a hack Я собрал вместе. Он клонирует вопросы и добавляет их в свой тег. Но я бы рекомендовал попытаться превзойти авторов этой разметки, чтобы пересмотреть ее во что-то более рациональное.

---

Чтобы скрыть не-вопросы, это выглядит, как вы могли бы использовать что-то вроде:

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

Чтобы показать ответ, вы могли бы использовать nextUntil:

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

---

FIDDLE