Animiertes Accordion Menü mit Table-artiger Struktur
bearbeitet von Matthias ScharwiesServus!
> Hallo Ferdinand,
>
> es ist nicht so einfach, den open-Ablauf von details zu animieren.
>
> Aber bei CSS Tricks beschreibt jemand, wie es gehen kann:
>
> <https://css-tricks.com/how-to-animate-the-details-element-using-waapi/>
>
Dieses Tutorial wurde bereits im Nov 2020 hier diskutiert: <https://forum.selfhtml.org/self/2020/nov/07/details-passendes-element-fur-content/1777642#m1777642>
>
Ich hatte daraufhin die beiden Tutorials überarbeitet:
* [HTML/Tutorials/details#Akkordeon](https://wiki.selfhtml.org/wiki/HTML/Tutorials/details#Akkordeon)
- die CSS-Lösung benötigt *Magic Numbers*
- gleich unter der CSS-Lösung gibt es einen Link auf:
* [JavaScript/Tutorials/Akkordeon mit details](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Akkordeon_mit_details)
- ohne WAAPI, die benötigte Höhe wird mit `getBoundingClientRect()`ermittelt
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“
Animiertes Accordion Menü mit Table-artiger Struktur
bearbeitet von Matthias ScharwiesServus!
> Hallo Ferdinand,
>
> es ist nicht so einfach, den open-Ablauf von details zu animieren.
>
> Aber bei CSS Tricks beschreibt jemand, wie es gehen kann:
>
> <https://css-tricks.com/how-to-animate-the-details-element-using-waapi/>
>
Dieses Tutorial wurde bereits im hier diskutiert: <https://forum.selfhtml.org/self/2020/nov/07/details-passendes-element-fur-content/1777642#m1777642>
>
Ich hatte daraufhin die beiden Tutorials überarbeitet:
* [HTML/Tutorials/details#Akkordeon](https://wiki.selfhtml.org/wiki/HTML/Tutorials/details#Akkordeon)
- die CSS-Lösung benötigt *Magic Numbers*
- gleich unter der CSS-Lösung gibt es einen Link auf:
* [JavaScript/Tutorials/Akkordeon mit details](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Akkordeon_mit_details)
- ohne WAAPI, die benötigte Höhe wird mit `getBoundingClientRect()`ermittelt
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“