@@j4nk3y > ich brüte seit einiger Zeit über folgendem Problem und komme mittlerweile nicht mehr weiter/ bzw finde nicht die richtige Stelle in der jQuery Doku. **Keine** Stelle in der jQuery-Doku ist die richtige. Weil jQuery nicht richtig ist. Dein Fehler ist, JavaScript zu verwenden. Und damit [ein Kätzchen zu töten](https://twitter.com/g16n/status/255653709827158016). Und das, obwohl die Viecher vom Aussterben bedroht sind. Besonders im Internet. Einfache Animationen macht man mit CSS. Hardware-beschleunigt, ruckelfrei. (Deshalb wird `transition` auf `transform` oder `opacity` angewandt.) Und wenn der Toggle-Button im DOM _vor_ den zu toggelnden Dingern steht, braucht du überhaupt kein JavaScript. Und warum Plural? Es könnte doch genügen, eins von den Dingern zu ändern und damit den Blick auf das andere freizugeben. Per Selektor für nachfolgende Geschwister: `button:hover + .toggle1`{: .language-css} Ja, für den Toggle-**Button** ist ein `button`-Element zu verwenden, kein `div`. Dann funktioniert das auch mit Tastatursteuerung: `button:focus + .toggle1`{: .language-css} [Sieht dann so aus.](http://codepen.io/gunnarbittersmann/pen/qNGEyP) Was passiert da? Der Container `.toggle-widget` bekommt Breite und Höhe. Außerdem eine Maximalbreite, damit er bei weniger zur Verfügung stehender Breite schmaler wird. Die Kindelemente `.toggle1`{: .language-css}, `.toggle2`{: .language-css} und `button`{: .language-css} bekommen Breitenangaben in Prozent. Und sie werden absolut im Container positioniert, weshalb der Container `position: relative` braucht. Die `div`s liegen damit genau übereinander. `.toggle1`{: .language-css} wird per `z-index` vor `.toggle2`{: .language-css} geholt. Wird der Button gehovert oder fokussiert(!), wird `.toggle1`{: .language-css} um seine eigene Breite nach links geschoben. Damit es dort nicht sichtbar ist, hat der Container `overflow: hidden`. Diese Verschiebung wird nun animiert ausgeführt. \* * * Die Beschriftung des Buttons kannst du mit _image replacement_{: lang="en"} verstecken. In `.toggle2`{: .language-css} stecken keine wichtigen Informationen‽ Es gibt ja Geräte, die haben gar kein Hover-Effekt. LLAP 🖖 -- _“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.”_{: lang="en"} —Todd Motto _[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}

@@j4nk3y > ich brüte seit einiger Zeit über folgendem Problem und komme mittlerweile nicht mehr weiter/ bzw finde nicht die richtige Stelle in der jQuery Doku. **Keine** Stelle in der jQuery-Doku ist die richtige. Weil jQuery nicht richtig ist. Dein Fehler ist, JavaScript zu verwenden. Und damit [ein Kätzchen zu töten](https://twitter.com/g16n/status/255653709827158016). Und das, obwohl die Viecher vom Aussterben bedroht sind. Besonders im Internet. Einfache Animationen macht man mit CSS. Hardware-beschleunigt, ruckelfrei. (Deshalb wird `transition` auf `transform` oder `opacity` angewandt.) Und wenn der Toggle-Button im DOM _vor_ den zu toggelnden Dingern steht, braucht du überhaupt kein JavaScript. Und warum Plural? Es könnte doch genügen, eins von den Dingern zu ändern und damit den Blick auf das andere freizugeben. Per Selektor für nachfolgende Geschwister: `button:hover + .toggle1`{: .language-css} Ja, für den Toggle-**Button** ist ein `button`-Element zu verwenden, kein `div`. Dann funktioniert das auch mit Tastatursteuerung: `button:focus + .toggle1`{: .language-css} [Sieht dann so aus.](http://codepen.io/gunnarbittersmann/pen/qNGEyP) Was passiert da? Der Container `.toggle-widget` bekommt Breite und Höhe. Außerdem eine Maximalbreite, damit er bei weniger zur Verfügung stehender Breite schmaler wird. Die Kindelemente `.toggle1`{: .language-css}, `.toggle2`{: .language-css} und `button`{: .language-css} bekommen Breitenangaben in Prozent. Und sie werden absolut im Container positioniert, weshalb der Container `position: relative` braucht. Die `div`s liegen damit genau übereinander. `.toggle1`{: .language-css} wird per `z-index` vor `.toggle2`{: .language-css} geholt. Wird der Button gehovert oder fokussiert(!), wird `.toggle1`{: .language-css} um seine eigene Breite nach links geschoben, damit es dort nicht sichtbar ist, hat der Container `overflow: hidden`. Diese Verschiebung wird nun animiert ausgeführt. \* * * Die Beschriftung des Buttons kannst du mit _image replacement_{: lang="en"} verstecken. In `.toggle2`{: .language-css} stecken keine wichtigen Informationen‽ Es gibt ja Geräte, die haben gar kein Hover-Effekt. LLAP 🖖 -- _“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.”_{: lang="en"} —Todd Motto _[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}