@@Rolf B > > Warum etwas verstecken, was sich sowieso schon außerhalb des Viewports befindet? > > Damit es bedienbar ist und man nicht in eingeklabbte Menüs hineintappt? # 🤦‍♂️ > Eine CSS-Eigenschaft, die die Sichtbarkeit unverändert lässt und nur das antabben verhindert gibt's meines Wissens nicht. Daher visibility:hidden. Es gibt aber eine **HTMLElement**-Eigenschaft, die die Sichtbarkeit unverändert lässt und nur das Antabben verhindert: [inert](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Global_attributes/inert). Ich hab das mal in den [Codepen](https://codepen.io/gunnarbittersmann/pen/JooxybG) eingebaut. > Aber das transitionend-Event braucht man schon noch, denn die Visibility darf erst auf hidden gesetzt werden, wenn der Transform durch ist. Das ist damit obsolet. --- ```js let isExpanded = this.getAttribute('aria-expanded') == 'true'; isExpanded = !isExpanded; ``` habe ich bewusst so geschrieben. So wird ersichtlich, dass `isExpanded` erst den aktuellen Zustand widerspiegelt, der dann geändert wird. Schriebe man hingegen ```js, bad const isExpanded = this.getAttribute('aria-expanded') != 'true'; ``` würde das zu einem großen „Hä??“ führen. Das ließe sich vielleicht verkleinern, indem man die Variable `willBeExpanded` benennt, aber besser verständlich ist wohl die Variante mit der expliziten Negierung von `isExpanded`. Jolan tru {:@art-x-romulan} -- Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz)

@@Rolf B > > Warum etwas verstecken, was sich sowieso schon außerhalb des Viewports befindet? > > Damit es bedienbar ist und man nicht in eingeklabbte Menüs hineintappt? # 🤦‍♂️ > Eine CSS-Eigenschaft, die die Sichtbarkeit unverändert lässt und nur das antabben verhindert gibt's meines Wissens nicht. Daher visibility:hidden. Es gibt aber eine **HTMLElement**-Eigenschaft, die die Sichtbarkeit unverändert lässt und nur das Antabben verhindert: [inert](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Global_attributes/inert). Ich hab das mal in den [Codepen](https://codepen.io/gunnarbittersmann/pen/JooxybG) eingebaut. > Aber das transitionend-Event braucht man schon noch, denn die Visibility darf erst auf hidden gesetzt werden, wenn der Transform durch ist. Das ist damit obsolet. --- ```js let isExpanded = this.getAttribute('aria-expanded') == 'true'; isExpanded = !isExpanded; ``` habe ich bewusst so geschrieben. So wird ersichtlich, dass `isExpanded` erst den aktuellen Zustand widerspiegelt, der dann geändert wird. Schriebe man hingegen ```js, bad const isExpanded = this.getAttribute('aria-expanded') != 'true'; ``` würde das zu einem großen „Hä??“ führen. Das ließe sich vielleicht verkleinern, indem man die Variable `willBeExpanded` benennt, aber besser verständlich ist wohl die Variante mit der explizitan Negierung von `isExpanded`. Jolan tru {:@art-x-romulan} -- Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz)

@@Rolf B > > Warum etwas verstecken, was sich sowieso schon außerhalb des Viewports befindet? > > Damit es bedienbar ist und man nicht in eingeklabbte Menüs hineintappt? # 🤦‍♂️ > Eine CSS-Eigenschaft, die die Sichtbarkeit unverändert lässt und nur das antabben verhindert gibt's meines Wissens nicht. Daher visibility:hidden. Es gibt aber eine **HTMLElement**-Eigenschaft, die die Sichtbarkeit unverändert lässt und nur das antabben verhindert: [inert](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Global_attributes/inert). Ich hab das mal in den [Codepen](https://codepen.io/gunnarbittersmann/pen/JooxybG) eingebaut. > Aber das transitionend-Event braucht man schon noch, denn die Visibility darf erst auf hidden gesetzt werden, wenn der Transform durch ist. Das ist damit obsolet. --- ```js let isExpanded = this.getAttribute('aria-expanded') == 'true'; isExpanded = !isExpanded; ``` habe ich bewusst so geschrieben. So wird ersichtlich, dass `isExpanded` erst den aktuellen Zustand widerspiegelt, der dann geändert wird. Schriebe man hingegen ```js, bad const isExpanded = this.getAttribute('aria-expanded') != 'true'; ``` würde das zu einem großen „Hä??“ führen. Das ließe sich vielleicht verkleinern, indem man die Variable `willBeExpanded` benennt, aber besser verständlich ist wohl die Variante mit der explizitan Negierung von `isExpanded`. Jolan tru {:@art-x-romulan} -- Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz)