So sorgen Sie für Übersicht

Teil 4: Workshop CSS: Aufklappbare Elemente

Dafür setzen wir zwei Pfeile ein. Die beiden Grafiken werden dynamisch über die Javascript-Funktion gesetzt, da eine statische Zuweisung die Flexibilität deutlich einschränken würde. Aus diesem Grund gibt es die beiden Variablen

var zuklappenBild='up.gif';
var aufklappenBild='down.gif';

die direkt mit dem jeweils passenden Bild verknüpft sind. Abhängig vom Zustand der Tabelle müssen auch die beiden Symbole einen dynamischen Wandel zwischen aufgeklappt und komprimiert mitmachen. Den einfachen Austausch der beiden Bilder erledigen Sie mithilfe zweier Zeilen:

var linkBild=this.
getElementsByTagName('img')[0];
linkBild.src=linkBild.src.indexOf
(zuklappenBild)==-1?zuklappenBild:aufklappenBild;

Als Erstes wird ermittelt, welches Bild aktuell dargestellt wird - im nächsten Schritt erfolgt dann die Korrektur der Verlinkung auf den aktuellen Wert.Etwas komplexer ist es, das jeweilige Symbol an der richtigen Stelle zu platzieren. Dafür wird als Erstes ein Anchor-Element angelegt, dieses mit der Verlinkung auf das Gatter - also in den leeren Raum - versehen und mit einer Funktion versehen, welches das Ereignis onClick mit false quittiert.

Symbol richtig platzieren

Etwas komplexer ist es, das jeweilige Symbol an der richtigen Stelle zu platzieren. Dafür wird als Erstes ein Anchor-Element angelegt, dieses mit der Verlinkung auf das Gatter - also in den leeren Raum - versehen und mit einer Funktion versehen, welches das Ereignis onClick mit false quittiert.

var neueVerlinkung=docum
ent.createElement('a');
neueVerlinkung.href='#';
neueVerlinkung.
onclick=function(){return false;}

Anschließend wird ein neues Objekt angelegt, welches mit dem Bild und den zugehörigen Eigenschaften verknüpft wird. In unserem Beispiel erhält dies den Variablennamen neuesBild und abhängig vom Wert der Variablen entweder den Link auf die Datei up.gif oder down.gif zugewiesen.

var neuesBild=
document.createElement('img');
neuesBild.src=Aufgangslage_Tabelle?
aufklappenBild:zuklappenBild;

Damit das Bild auch ordentlich platziert werden kann, ist am Ende der Fußzeile ein weiteres Tabellenfeld notwendig. Da die Fußzeile lediglich ein <td>-Element beinhaltet, haben Sie dies auch einfach über die Funktion getElementsByName[] gefunden.

var tf=t[i].getElementsByTagName
('tfoot')[0];
var lt=tf.getElementsByTagName
('td')[tf.getElementsByTagName('td').length-1];

Abschließend werden die Elemente zusammengefügt und die Bildinformation der Verlinkung über die Methode appendChild() als neues Kindelement am Ende angefügt. Diese Daten werden als neues Tabellenfeld in die bestehende Fußzeile eingefügt, sodass Sie auch das Pfeilsymbol direkt anklicken können.

neueVerlinkung.appendChild
(neuesBild);
lt.insertBefore(neueVerlinkung,
lt.firstChild);

Die zugehörige Funktion zum Ein- und Ausblenden der Tabellenfelder werden bereits weiter oben im Skript den einzelnen Elementen der Fußzeile zugewiesen. Mit einer anderen Technik gehen Sie bei Navigationsmenüs an den Start. Das Grundgerüst dafür stellt eine HTML-Seite mit Aufzählung dar. Im folgenden Beispiel gibt es drei Menüs mit jeweils mehreren Untermenüpunkten.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".