Form teilweise aus-/einblenden

[Rolf B]

Hallo mnike05,

die Event-Reihenfolge ist DOMContentLoaded, wenn das DOM fertig aufgebaut ist, und load, wenn alle Zusatzressourcen (z.B. CSS-Dateien und Bilder) geladen sind.

Einen ready-Handler an's load-Event zu hängen ist nicht gut. Wenn viele externe Ressourcen da sind, kommt der zu spät zum Zuge. DOMContentLoaded ist genau dafür da.

Aber Vorsicht: Bei JavaScript, das im HTML drinsteht oder ohne async-Attribut per Script-Element geladen wird, kann man davon ausgehen, dass zuerst dieses JavaScript ausgeführt wird und dann die Events feuern. Wenn das bei Dir so ist, kannst Du den nächsten Abschnitt überlesen.

Bei asynchron geladenem JavaScript kann es sein, dass man diese Events verpasst. D.h. das Pattern bei asynchron geladenem Script sollte sein:

if (document.readyState == "loading")
   document.addEventListener("DOMContentLoaded", DOMContentLoadedHandler);
else
   DOMContentLoadedHandler();

Hier auf jeden Fall weiterlesen ;)

Im DOMContentLoadedHandler rufst Du dann einfach ShowErweitert auf. Die fixe Initialisierung auf display:none entfällt (bzw. würde ohnehin ins HTML oder CSS gehören).

Du solltest auch überlegen, auf das direkte Setzen von display:none/block zu verzichten. Füge statt dessen dem #Erweitert Element eine Klasse hinzu, oder nimm sie weg.

#Erweitert {
   display: none;
}

#Erweitert.aktiv {
   display: block;
}

Was auch noch passieren sollte, ist das Setzen der richtigen Aria-Attribute, damit ein Screenreader weiß, wie er den Sachverhalt einem Sehbehinderten Anwender mitteilen kann. Ich muss aber leider eingestehen, dass ich darin nicht so beschlagen bin, das können andere hier besser.

Rolf