Apply the siblings selector when the second operand has "hidden" attribute - html

Question

Intro
The vue-slide-up-down plugin appends the attribute hidden to target element to hide it. According documentation, this method is preferred:
"use-hidden" property
Whether to apply the "hidden" attribute to the element when closed.
Defaults to true. This hides the component from the screen and from
assistive devices. The internal elements of the component are
completely invisible, and cannot be focused on (by a keyboard or
assistive device). (This is probably what you want!) If you need, set
this property to false to not use the hidden attribute. This could be
used if you wanted to have a min-height requirement on your component.
Note that this can create accessibility issues, specifically for users with a keyboard or screen reader.
🌎 Source
The problem is the element with hidden attribute obeys to Schrödinger paradox: "this elements is existing, but in the same time not existing". Below example shows what it means.
Target
When the ".ControlsGroup" (designated by blue) is visibly last, it must provide the vertical space l1 below self inside ".Container" (designated by light yellow):
When the ".ErrorsContainer" (designated by orange) is visible, it must retire l2 px from ".ControlsGroup" and provide vertical space l3 below self:
The usage of padding-bottom of container is not allowed because basically we don't know at advance what will be placed inside ".ControlsGroup", so each element MUST know:
How much to retire from specific previous element
How much of vertical space it needs to provide below self when going last.
<div class="Container">
<div class="ControlsGroup"></div>
<div class="ErrorsContainer"></div>
</div>
Problem
When ErrorsContainer is visible, everything is all right: in below example, l2 is 24px and l3 is 36px:
.Container {
background: #FFECB3;
overflow: auto;
}
.ControlsGroup {
height: 300px;
background: #03A9F4;
}
.ErrorsContainer {
height: 40px;
background: #FF9800;
margin-bottom: 36px;
}
.ControlsGroup + .ErrorsContainer {
margin-top: 24px;
}
🌎 Fiddle
Now, if to add hidden attribute to .ErrorsContainer, no l1 space (between bottom of .ControlsGroup and bottom of .Container) will be:
🌎 Fiddle
Let's try to add below CSS rule that means "when .ErrorsContiner with attribute hidden going after .ControlsGroup, push it to 12px (l3)":
.ControlsGroup + .ErrorsContainer[hidden="hidden"] {
margin-bottom: 12px;
}
Nothing will change. The effect like .ErrorsContainer does not exist.
Next, lets try to add below rule that means "When ControlsGroup going last, make 12px of extra space inside the parent":
.ControlsGroup:last-child {
margin-bottom: 12px;
}
Nothing will change because .ErrorContainer actually exists and it's the last child.
Now how to define the l3 when .ErrorsContainer is hidden?

Answer 1

We can do some math here and consider x where l1 + x = l2. The idea is to always have the l1 and when the ErrorsContainer is visible we add to it a margin-top equal to x to get l2 instead of l1. I will also use flexbox to avoid margin collapsing and make sure the margin add and not collapse.
I am using CSS variables to illustrate but it's not mandatory:
.Container {
--l1:30px;
--x:-15px; /* so l2 = 15px */
--l3:10px;
background: #FFECB3;
display:flex;
flex-direction:column;
overflow: auto;
border:2px solid;
margin:5px;
}
.ControlsGroup {
height: 100px;
background: #03A9F4;
}
.ErrorsContainer {
height: 40px;
background: #FF9800;
margin:var(--x) 0 var(--l3);
}
.ControlsGroup {
margin-bottom:var(--l1);
}
<div class="Container">
<div class="ControlsGroup"></div>
<div class="ErrorsContainer" hidden></div>
</div>
<div class="Container">
<div class="ControlsGroup"></div>
<div class="ErrorsContainer"></div>
</div>