Hide elements for CSS selector rules

[arfibwi]

I'm trying to build an HTML page with accordion-style functionality. First off, I have this simple CSS selector, stating "if the H1 is right after another H1, make the background red".\[code\]<style type="text/css"> h1 + h1 { background-color: red; }</style>\[/code\]Then some plain HTML:\[code\]<h1>First</h1><p>Blah, blah...</p><h1>Second</h1><p>Blah, blah...</p><h1>Third</h1><p>Blah, blah...</p>\[/code\]All the H1s look like they should, none have a red background, because they're preceeded by a P tag. For this:\[code\]<h1>First</h1><h1>Second</h1><p>Blah, blah...</p><h1>Third</h1><p>Blah, blah...</p>\[/code\]The second H1 has a red background, because the P tag between the it and previous H1 is removed. Very nice.Now, what I actually want to do is to programmatically hide the "content" below the H1s and then I would like to see the red-rule kick in. Like this:\[code\]<h1>First</h1><p>Blah, blah...</p><h1>Second</h1><p style="display: none">Blah, blah...</p><h1>Third</h1><p>Hello world...</p>\[/code\]But since the P tag is still there, the CSS rule doesn't apply for the third H1, and there's no red background.Question: Is there a way to apply something using JavaScript to the P tags that will cause them to (temporarily) ignored by the CSS rule??