Javascript - Hide some but not all divs

[humpingdan]

I have a webpage partly dynamically created and partly hard coded. If the document spans 1 whole page print the header once, if there are multiple documents fitting to the page height print the header once, then we it goes on to the next page print out the header:

Example of html - Content is dynmaic:

<div class="header">Logo</div>
<div class="content">
some text
</div>

<div class="header">Logo</div>
<div class="content">
some text
</div>

What i thought would be possible, it doesnt have to be valid html, would be to set a count.

Use javascript to count the "header" div, then in the "header" class add the count number to the div:

E.g.

<div class="header 1">Logo</div>
<div class="content">
some text
</div>

<div class="header 2">Logo</div>
<div class="content">
some text
</div>

Then in css i would decide on a per document basis which headers to hide:

header 1 = Display

header 2 = Hide

When header 3 comes along and starts on a new page = show!

Basically I want to count number of "header" and out put to the class which number each "header" is in the count?

[lavazza]

I have a hunch that an old mantra might be apt:
Javascript is for behaviour
CSS is for presentation

I suggest that you have a look at the media-specific CSS [webmasterworld.com] thread

One other CSS 'trick' that might be worth investigating is (in a @media = "print" stylesheet) is page-break-before: always; that you could apply to the relevant headers to force them to the top of a new page

e.g.

.breakBefore{
page-break-before: always;
}