scriptaculous BlindUp/BlindDown

  • Hallo


    habe den script.aculo.us-Effekt BlindUp/BlindDown eingesetzt. Nun möchte ich aber nicht zwei Buttons für das Anzeigen des Inhaltes und für das Verschwinden haben. Möchte ein Toggle-Effekt. Ist das DIV angezeigt, schliesst es sich, ist es geschlossen öffnet es sich. Wie mache ich das?


    Danke für Infos, Gruss
    Thomas

  • Hallo Zusammen


    Ich kenne mich mit javascript leider nicht besonders gut aus und komme daher nicht mehr weiter. Ich möchte eine Navigation mit Javascript erstellen die am Ende in etwa so aussehen sollte: Vorlage in Flash


    Die Startanimation ist nicht so wichtig, damit bin ich bei meiner Lösung eigentlich zufrieden. Probleme macht mir der "blätter-effekt" zwischen den einzelnen Zeilen. Ich habe versucht mit dem blindUP/blindDown einen ähnlichen Effekt zu bekommen, mit dem ich vom "optischen Eindruch" eigentlich auch zufrieden bin. nur funktioniert es technisch gesehen noch nicht, ich hoffe ihr könnt mir da weiterhelfen?


    Klicke ich mich von unter her durch die Zeilen funktioniert alles wie gewünscht. Fährt man aber z.B von der 1. Zeile mit der Maus auf die untere zeile 2, entsteht ein unschöner Effekt, da der Cursor beim blindUpEffekt kurz auch auf den Auslöser von Zeile 3 kommt und so natürlich diese Zeile einblenden will. Um diesen Effekt zu verhindern, wollte ich jetzt, jeweils nur die "Schaltflächen" der benachbarten Zeilen einblenden, und so verhindern dass nicht gewollte "Schaltflächen" berührt werden.



    Anschliessend möchte ich die gewünschte Zeile wieder einblenden:

    Code
    1. //Gewähltes Objekt einblenden:
    2. new Effect.BlindDown(line, {duration: 0.25});
    3. document.getElementById(line).style.height='100px;';



    Da die Anzahl Zeilen varieren können habe ich es mit einer Schleife versucht, aber irgendwie funktioniert das nicht so wie ich es mir vorgestellt habe. Gebe ich expliziet die "opener-Id" an die aus-/eingeblendet sein sollen, funktioniert es.



    Ich verwende Scriptaculous und Prototype Version 1.6.0.3.


    Nachfolgend noch mein kompletter Code:


    HTML


    Ich hoffe Ich habe mich halbwegs verständlich ausgedrückt und Ihr seht wo der Hacken liegt. Oder gehe ich das falsch an? würdet Ihr einen komplett anderen (evlt. einfacheren?) Weg wählen um auf das gewünschte Resultat zu kommen?