Prototype.js Hide/show With Variable Html Elements?

I have been staring at this problem for too long and most likely missing a simple solution so I hope somebody can take my blindfold off and show me the way The markup (which comes from a CMS and I cannot change it) I am working with is akin to:

<div id="faq">
<p><strong class="open">FAQ 1</strong></p>
<p>FAQ 1 content lorem ipsem lorem ipsem ad infinitum</p>

[code]....

Notice how the second fo 3 FAQ sections has 2 paragraphs under the 'trigger' rather than 1? Therein lies my problem, because what I am doing with prototype.js is:

1.) Loop through page and collect all <p>'s
2.) do a .each iteration and attach an onclick event on $$('p strong.open') - assume this node for each iteration is now var 'trigger'
3.) run Element.hide() on trigger.next()
4.) in the onclick event, run Element.show() for trigger.next()

- If you are still following so far - my problem is that next() only shows/hides one single element and that is the <p> holding the content - which is fine except when there are 2 or even more <p>'s with content I need to act on. I;ve experimented with nextSiblings and adjacent() and I end up with too many nodes - basically every <p> in the entire document. I just want 'hide all P's after the trigger P up until the next p > strong.open