vue-slide-up-down | Like jQuery 's slideUp/slideDown , but for Vue | Router library

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.

1. When the ".ControlsGroup" (designated by blue) is visibly last, it must provide the vertical space l1 below self inside ".Container" (designated by light yellow):

1. 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:

1. How much to retire from specific previous element
2. How much of vertical space it needs to provide below self when going last.