JS to display on/off & nth-child(2n+1)

[Rahmanyinov]

Hi,

I need some help with Javascript and CSS. On the page there are several sections. I’ve built a JS filter that sets the display property of these sections to none or block. In CSS I’ve set the background of these sections to white/gray:
section:nth-child(2n+1) { background-color:#f8f8f8;}
Everything works fine except that when some of these sections are hidden the backgrounds are confused, I mean they keep their background color, e.g. there are 2 or more gray sections below each other. I need: white – gray – white – gray …
Can You help me, please? I don’t have any idea how to solve this.
Thank You,

Rahmanyinov

[Paulie_D]

I think you need to apply/re-apply the CSS on browser load/reload.

A working example in Codepen.io would be helpful.

I think the Jquery pseudo-class :visible might be an option here.

[Paulie_D]

MOD EDIT – Moved to JS Jungle

[Rahmanyinov]

You can delete this thread, problem’s solved.

[dyr]

An alternative, if Paulie_D’s suggestion doesn’t work for you is to use jQuery to apply classes (‘odd’) to the odd numbered visible divs. This function would be reapplied whenever a div is hidden or shown so that you always have the correct zebra-striping effect.

Here’s an example:

http://codepen.io/shawkdsn/pen/kpyqw

[Author]

Posts