Klawischnigg: Mehrere Zeilen einer Tabelle animiert aus- und einblende?

Beitrag lesen

Hi there,

ich habe einige Zahlen und Daten tabellarisch aufgelistet, die auch gruppiert sind.
Die sozusagen als Überschrift zu sehende Gruppen-Zeile wird mit einem colspan dargstellt.
Aber auch einzelne TDs können colspan enthalten.
Stellt euch Umsätze pro Kunde und Standort vor, kategorisiert nach Artikelgruppe.

Über einen Klick in diese Gruppenspalte können alle darunter liegenden Zeilen aus- und eingeblendet werden. Dies erreiche ich, indem ich allen datunter liegenden TRs style.display="none" angebe oder eben wieder auf style.display="" setze.

Leider wird das nicht animiert, also hat jemand eine Idee, wie ich das realisieren kann?

Einen Jalousie-Effekt kannst Du im Prinzip ganz leicht erreichen, indem Du zwei Stylesheetklassen für die TR-Zeile definierst, eine mit "display:table-row" (oder was weiss ich, wie das bei Tabellen heisst, ich verwend das sowenig) und eine "display:none".
Dann kannst Du mit Javascript den sichtbaren resp. unsichtbaren Zeilen die entsprechenden Klassen zuweisen. Und für die "Animation" verwendest Du einfach eine CSS3-Transition für den Übergang von einer Klasse zur anderen. Dafür brauchst Du nicht diesen ganzen jQuery-Mist zu laden.

Ob es eine Möglichkeit ohne Javascript gibt, wage ich zu bezweifeln. Camping-RIDER meint, es geht mit jQuery OHNE Javascript, vielleicht hat er ja recht, auch wenn ich es nicht so recht glaube...