HTML & CSS Akkordeon Probleme bei der "transition"

Hallo Leute,

ich schreiben bewusst in diesem Forum da es nichts mit dem Template zu tun hat...
Ich habe ein Akkordeon mit HTML und CSS erstellt, soweit so gut, jedoch möchte ich, dass das Ding soweit ausklappt, dass man den gesamten Text sieht und nicht mehr oder weniger...

Alles funktioniert einwandfrei wenn ich die höhe mit "em" angebe in dem Moment wenn ich zum Beispiel "100%" eintrage, wird zwas alles angezeigt wie es sollte aber die "transition" funktioniert auf einmal nicht mehr.

Link zu diesem Projekt auf Codepen

also wenn ich in der CSS ab Zeile 53, die Höhe von "7em" auf "100%" stelle wird alles richtig angezeigt jedoch ist der Übergang grausam.

Wenn jemand eine Idee hat, würde ich mich freuen.

Schöne Grüße
Harry

Ich würd ja gar nicht anfangen sowas selber programmieren zu wollen. Bootstrap selber hat schon eine solche Funktion welche man nutzen kann. Oder man nimmt einfach die "Slider" Erweiterung von RegularLabs.
Hab ich auch in der Dok des Templates erwähnt: bakual.net/dokumentation/typography.html#akkordeon

Ich kenne die Bootstrap-Lösung, das ist nicht für eine Webseite, ich versuche gerade mit HTML und CSS eine "Freundschaft" rinzugehen ^^
Mir geht es hier nur um das Verständnis warum etwas so funktioniert wie es funktioniert...
Keine Sorge, ich würde das nicht auf einer Webseite einbauen
Schöne Grüße
Harry

Die Höhe in Prozent angeben ist immer sone Sache. Die Prozentangabe wär in Bezug auf den übergeordneten Container. Wenn diese Höhe aber nicht in absoluten Werten definiert wurde wirds lustig

Hallo Thomas,
besten Dank für Deine Zeit und Mühe, habe jetzt nochmal herum experimentiert. Auch wenn ich dem übergeordneten div eine höhe von 300px gebe und dann die höhe von 100% verleihe, dann funktioniert die transition nicht und es springt auf bzw. zu.

Kann es sein, daß der Browser vorher wissen muß über welche Distanz sich die "transition" zieht, damit er die Gewschwindigkeit der tansition festlegen kann? Mir kommt vor als würde es nur mit absoluten Werten funktionieren, es der Browser so alle Daten zur berechnung hat (Dauer, Distanz, ergibt Geschwindigkeit der "transition").
Wenn dem so ist dann verstehe ich es endlich ^^

Schöne Grüße
Harry

Schon möglich. So gut kenn ich mich mit JavScript und CSS auch nicht aus