Collapsing Contained Elements using Stateful CSS

Image by Gil Dekel from Pixabay

Scenario

We have the following markup.

<nav>
    <div class="container"></div>
</nav>

When we apply the onCollapse class to the nav element we wish to shrink the nav width to 4rem and also the div width to 2rem .

Approach

The rule

nav.onCollapse .container

will cause the div element to collapse when onCollapse is added as a class to the nav element.

Demo

Stateful CSS Inner Container Collapse - StackBlitz