Matze: Tabellenkörper ein- und ausklappen

Hallo!

Ich habe mehrere Tabellen mit einem Body-Bereich, einer Kopf- und Fußzeile.
Den Body-Bereich möchte ich gern per JS auf Knopfdruck ein- und ausklappen.
Das funktioniert mit einer Zuweisung der display-Eigenschaft auch super, ich hätte es aber gern etwas 'weicher'. Ähnlich wie in diesen Akkordion-Menüs.

Der Tabellenfuß soll sich beim einklappen über den Body schieben und diesen verschwinden lassen. Beim ausklappen natürlich umgedreht.

Meine Idee war jetzt die Höhe des tbody-Elements mit einem setInterval() bis auf 0 zu reduzieren. Das sollte wohl mit der height-Eigenschaft möglich sein.

Aber wie mach ich das ganze dann wieder Rückgängig?
Also woher weiß ich, wie hoch das Element vorher war, bzw. bis auf welche Höhe ich es dann wieder "aufklappen" muss?

Ich bin euch dankbar für Tipps zur Umsetzung.

Danke und Grüße, Matze

  1. hallo Matze,

    Also woher weiß ich, wie hoch das Element vorher war, bzw. bis auf welche Höhe ich es dann wieder "aufklappen" muss?

    http://de.selfhtml.org/javascript/objekte/all.htm#offset_height@title=offsetHeight könnte dir helfen

    grüße,
    henman

    --
    "Sir! We are surrounded!" - "Excellent! We can attack in any direction!"
  2. @@Matze:

    nuqneH

    Das funktioniert mit einer Zuweisung der display-Eigenschaft auch super, ich hätte es aber gern etwas 'weicher'.

    Klarer Fall für 'transition'. [CSS3-TRANSITIONS]

    Wenn du nicht so lange auf Browserunterstützung warten magst: jQuery bietet hide() / show().

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Hey Gunnar!

      Klarer Fall für 'transition'. [CSS3-TRANSITIONS]

      Stimmt, klarer Fall. Leider erst ab CSS3. TRANSITIONS scheidet also aus.

      Wenn du nicht so lange auf Browserunterstützung warten magst: jQuery bietet hide() / show().

      Sieht auch sehr schön aus, aber wenn ich richtig gelesen habe wird dabei immer auch die Breite und Deckkraft geändert. Ich hätte aber gern, dass nur die Höhe geändert wird.
      show() und hide() scheiden also leider auch aus.

      Danke und Grüße, Matze

      1. Hi,

        Wenn du nicht so lange auf Browserunterstützung warten magst: jQuery bietet hide() / show().

        Sieht auch sehr schön aus, aber wenn ich richtig gelesen habe wird dabei immer auch die Breite und Deckkraft geändert. Ich hätte aber gern, dass nur die Höhe geändert wird.
        show() und hide() scheiden also leider auch aus.

        Na dann schau dich halt mal ein bisschen um - vielleicht sind slideUp/slideDown ja eher das, was du dir vorstellst.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        1. Hey ChrisB!

          Na dann schau dich halt mal ein bisschen um - vielleicht sind slideUp/slideDown ja eher das, was du dir vorstellst.

          Oh danke!
          Ich bin mir nur nicht sicher, ob ich jQuery verwenden will.
          Ich werde erstmal schaun ob ich was mit dem Vorschlag von henmananfangen kann.

          Grüße, Matze

        2. Na dann schau dich halt mal ein bisschen um - vielleicht sind slideUp/slideDown ja eher das, was du dir vorstellst.

          Und zur not mit animate()  selbst bauen.