Das hat der liebe Alexander in seinem Kommentar ganz richtig beschrieben: Meine Klappnavigation – auch liebevoll Blogtoys genannt – ist erschreckend unschön und kaum abstrahiert mit JavaScript umgesetzt. Das wollte ich jetzt ändern.

Zunächst wollte ich das neue schlanke Mini-Framework jQuery einsetzen, weil es von der Syntax-Denke her eher dem entspricht, was man sich als Webdesigner so vorstellt. Und da moo.fx, meine bis dahin optimal funktionierende Effekte-Bibliothek, in jQuery angeblich bereits eingeflochten zu sein schien, legte ich gleich los!

Die Lernkurve von jQuery ist sehr flach, man kommt extrem schnell zu coolen Resultaten. Doch leider ist die ganze Sache noch nicht ganz bugfrei, was es letztlich für mich scheitern ließ. Ganz speziell ging es darum:

Das Auf- und Zuklappen über einen Ausdruck wie $(".blogtoy h2").find("div").toggle(); hat wunderbar funktioniert. Kreuzte ich das ganze jedoch mit einem sanften moo.fx-Effekt, nämlich $(".blogtoy h2").find("div").toggle("slow"); hat es nicht mehr funktioniert. Offenbar wurde hier plötzlich ein anderes toggle(); verwendet, denn es klappten sich nicht nur ein DIV aus, sondern alle! Ich vermute, hier hat jemand das in moo.fx eingebaute toggle(); mit dem toggle(); von jQuery durcheinandergebracht.

Statt dessen setze ich jetzt wieder auf Prototype und habe meinen selbstgeschriebenen Code-Anteil stark abstrahiert und somit auf die Hälfte gekürzt, sowie besser lesbar gemacht. Prost!

update: Es geht doch mit jQuery, der Befehl slideToggle(); führt zum Ziel. Danke an die Medienfreunde! Allerdings werde ich das erst nächste Woche vollständig implementieren, bis dahin ist hier Sendepause :-)