Prevent style inheritance of 'display' when setting style using Javascript

Question

I would like to toggle the visibility of a larger portion of HTML using Javascript, which also contains display: properties.

Problem is th

Answer 1

Why is setting the value of display of an outer class propagated to the inner class, when it's ruled out by CSS?

It isn't.

From the specification:

This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

---

How do I prevent this?

One of:

• not using display: none (as the spec says, visibility might be a better choice)
• by moving the elements you wish to display so they are not descendants of the elements you wish to hide
• changing the elements you hide (e.g. to a select number of elements that are both descendants of the element you are currently hiding and siblings of the elements you want to display).