Question

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”.

<style type="text/css">
    h1 + h1 
    {
        background-color: red;
    }
</style>

Then some plain HTML:

<h1>First</h1>
<p>Blah, blah...</p>
<h1>Second</h1>
<p>Blah, blah...</p>
<h1>Third</h1>
<p>Blah, blah...</p>

All the H1s look like they should, none have a red background, because they’re preceeded by a P tag.

For this:

<h1>First</h1>
<h1>Second</h1>
<p>Blah, blah...</p>
<h1>Third</h1>
<p>Blah, blah...</p>

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:

<h1>First</h1>
<p>Blah, blah...</p>
<h1>Second</h1>
<p style="display: none">Blah, blah...</p>
<h1>Third</h1>
<p>Hello world...</p>

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

Answer 1

Ah, it came to me as I was writing the question. So, for future reference, here’s my own solution:

Add a second rule for the red background, simply stating “H1 after H1 OR H1 following any tag with a ‘hidden’ class set”:

h1 + h1, .hidden + h1
{
    background-color: red;
}

And a simple hide-class:

.hidden
{
    display: none;
}

Then I can simply add a “hidden” class to the content P tags:

<h1>First</h1>
<p>Blah, blah...</p>
<h1>Second</h1>
<p class="hidden xxx">Blah, blah...</p>
<h1>Third</h1>
<p>Hello world...</p>

Viola, the third H1 is red. 🙂 AND I can apply any other classes (the “xxx”) I need to the content P tags.