esse est percipi
Das Weblog eines Grafikdesigners. Seit 2003.

Webdesign | Montag, 1. Dezember 2003

Texte und Bilder ein- und ausblenden

Auf der Website eines Kunden sollte das Navigationsmenü die Unterpunkte erst nach Klick auf die Hauptpunkte anzeigen. Es gibt einige Möglichkeiten, das umzusetzen, u.a. auch Frames. Ich gehöre aber der Internationalen Liga zur Ächtung von Framesets an, und deshalb habe ich eine einfache CSS/Javascript Lösung angewandt, die auch für viele andere Dinge eingesetzt werden kann – hier ein Beispiel:

Versteckter Absatz…

In diesen versteckten Absatz kann alles rein, was man nur auf Anforderung sehen soll – z.B. Abbildungen von Illustratorinnen (Abb.: Jennifer Baule-Prinz), Erläuterungen, Auflösungen von Quizfragen, Zusatzinformationen, Einkaufslisten für Kochrezepte, Formulare etc.

So funktioniert’s

Der versteckte Absatz liegt in einem div, dessen Inhalt zwar geladen, aber mittels display:none erst mal nicht angezeigt wird. Mit einem Javascript wird nun der Wert der Eigenschaft display auf block gesetzt, wenn er none war und umgekehrt.

Die ganze Geschichte ist relativ unaufwändig zu implementieren. In die CSS Datei werden folgende Zeilen eingetragen:

#hiddendiv {
  display: none;
}

Und die Javascript Funktion, die zwischen display:none und display:block wechselt, sieht so aus:

function toggledisplay (id){
  if (document.getElementById) {
    var mydiv = document.getElementById(id);
    mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
  }
}

Den Text und/oder die Bilder, die man verstecken will, bettet man nun in ein div ein:

<div id="hiddendiv">Versteckter Text</div>

Und das ist der Link, der zwischen block und none wechselt:

<a href="#" onClick="javascript:toggledisplay('hiddendiv'); return false" title="Versteckten Absatz anzeigen/verstecken">Versteckten Text anzeigen...</a>

Man könnte das ganze natürlich auch mit einem mouseOver kombinieren, man könnte mehrere hidden ids in der CSS Datei anlegen, um dann z.B. verschiedene Abbildungen nacheinander in einen Text einzublenden, man kann Menüs aufklappen lassen usw. usf.

Getestet ist das alles bis jetzt nur unter Safari, Mac-MSIE 5.2.3 und Camino, wobei sich bei Camino die Statusgrafik nicht verändert.

Ähnliche Beiträge:

Supereinfache CSS-Schatten für Bilder (Update)

Text dynamisch durch Bilder ersetzen

Hopper – Konvertiert und komprimiert Bilder, Videos und PDFs

1000 Bilder pro Sekunde

So langsam wird’s...

Kommentare:

Bei den Kommentaren handelt es sich um fremde Inhalte, die sich „esse est percipi“ nicht zueigen macht. Verantwortlich für den Inhalt eines Kommentars ist der jeweilige Verfasser.

IE6 Windows: alles Prima, indicator wird entsprechend angezeigt. Firebird (Mozilla) Windows verändert den Status überhaupt nicht – Hier sehe ich immer das Indicator Bild show.gif.

IE 6, 5.01, 5.5 (auf WinXP): OK, bis auf das nervige nach oben Scrollen. Firebird 0.7 ebenso, zusätzlich das nicht wechselnde Indikatorbild.

Ausklappbares „Kommentar schreiben“: Klickt man in der Vorschau-Ansicht auf den „Zurück“-Button, ist danach das Kommentar-Formular wieder eingeklappt. Immerhin ist nach einem weiteren Klick auf „Kommentar schreiben“ der Text im Formular noch da, aber es nervt irgendwie (Firebrid 0.7, WinXP).

„Statt <a href="#" onclick="..."> schreibt man <a href="javascript:...>“? Falsch. Es gibt kein Netzwerkprotokoll mit dem Namen „javascript:“. 8-) Man schreibt <a href="ersatz.html" onclick="funktion();return false"> oder onclick="return funktion(...)" und innerhalb der Funktion entsprechend return false;. Vorteil: a) Der Rückgabewert verhindert das Anspringen des href. b) Ohne JavaScript gibt’s ein vollwertiges Ersatzmenü.

Siehe auch javascript pop-ups using this.href.

Was ich auch nicht ganz verstehe: Das <div> selektierst du per DOM-kompatiblem getElementById(). Warum nicht auch das <img>?

Wie gehts! Ich bin Chris Carpenter. Ich lerne Deustch am Goddard High School. Du site ist prima. Ich liebe die Folie! Auf wiedersehn!

Ich verstehe nicht warum man immer <a href="#" onclick="…"> nehmen muss. Da kann man doch auch problemlos ein <span onclick="…"> nehmen! Und mit CSS kann man das formatieren wie man lustig ist. °kopfschüttel°

Mich ärgert bloß immer dass man wieder zum Seitenanfang springt wenn man JavaScript ausgeschaltet hat. Und außerdem öffne ich solche Links oft in einem neuen Tab, guck mir die Seite an, nur um dann festzustellen, dass ich mir die gleiche Seite zuvor schon angeguckt habe. Einfach nur nervig. Was interessiert mich da der Mangel irgendeines Browsers, nimm halt Mozilla ;-)

Siehe auch javascript pop-ups using this.href.

Was ich auch nicht ganz verstehe: Das <div> selektierst du per DOM-kompatiblem getElementById(). Warum nicht auch das <img>?

ich habe auch vor auf meiner webseite ein solches ausklappen zu ermöglichen. es sollte aber wenn man das zweite ausklappt das erste automatisch wieder zugehen. will es für adressen benutzen das das die seite nicht so lange scrollbalken hat wäre super wen sich das jemand mal ansehen könnt und mir da weiterhelfen könnte.

Jedoch scheint es mit Netscape 4.x nicht zu laufen. Ich nutze 4.8 engl. und es passiert nichts. Also kein Aufklappen.

Irgendeine Idee? Leider hat 4.x noch keine JavaScript-Konsole.

An den freien Art-Direktor:
Ich habe auch das gleiche Problem wie alex. Ich würde es begrüßen, wenn die anderen divs zuklappen, sobald man auf einen anderen Link klickt.
Also, der Bedarf ist vorhanden, schließlich sind wir schon zu zweit!

Martin K.

Hallöchen! Ja, ich mal wieder!

Ich habe mir mal ein paar Gedanken gemacht. Es ist ja eigentlich ganz einfach, was alex vorgeschlagen hat. Meine Links sehen jetzt so aus:
Versteckten Text anzeigen...

Aber dennoch wäre es ja genial, wenn man erst etwas aufklappen lässt und das dann – wenn man irgendetwas anderes aufklappt – automatisch zu klappt.

Ist das zu realisieren?

Martin K.

Ach, wie blöd. Wie kann man denn einen Link (also mit den ganzen Tags) hier reinschreiben, ohne dass er dann umgewandelt wird?

Gute Erfindung und hilft mir wirklich. Leider nimmt er irgendwie nicht die CSS-Angabe von display:none; denn es ist immer angezeigt beim Start.

High,
ich bin Programmierer, Euer Problem ist super einfach, speichert die ID und lasst diese vor dem nächsten Aufruf zuklappen.

High,
Ich vergaß etwas,
die _Variable muss natürlich global sein.
Wenn ich Zeit habe schicke ich ein script was universell zu handhaben ist. Im Moment fehlt mir die Zeit.

@Enrico Eckstein:
Hi Enrico – freue mich jetzt schon auf Dein Script !!! :-)

Hi Michael / Herr Preidel, zunächst einmal vielen Dank für Ihre gelungenen Artikel und gleich eine Frage hinterher:
Wie kann ich den Javascriptaufruf mit einem zweiten kombinieren? Bsp.:
1. onClick=“javascript:toggledisplay(‘divfach’); return false“
2. onClick=“javascript:toggledisplay(‘divver’); return false“

Die Trennung durch “;“ macht hier natürlich keinen Sinn.

Vielen Dank für Ihre Zeit.

Kann man auch mit einem Klick mehrere divs anzeigen lassen?

@ Enrico Eckstein
Kannst du mir das Script geben?

hi,

ich habe das script erfolgreich auf meiner neuen homepage eingebaut. wie kann ich aber den pfeil nach dem klicken runter zeigen lassen? und gibt es eine möglichkeit den linktext nach dem klicken zu ändern? z.b. aus öffnen wird schließen und nach erneutem klicken wieder öffnen (auf zu auf)..?

Wie kriegt man denn das hin mit dem kleinen Dreick-Bild, das nach unten zeigt, wenn man den versteckten Text einblenden lässt?

Klappt gut danke danke!

Super, vielen Dank für diese sehr ausführliche Anleitung! Endlich hat es geklappt! :-)

hallo,

ich versuche auch grad das umzusetzen und frage mich wie ich das mit dem indicator pfeil realisieren kann. leider scheint genau das wichtige kommentar (28) zu fehlen, zumindest kann ich da nichts sehen.

kann mir da jmd helfen?

würde michs ehr freuen!

lg pia

Hi!

Habe die gleiche Anfrage wie PIA. Konnte es bis zum toggledisplay ('indicator') zwar noch nachverfolgen, sehe aber nich wo dann die Anweisung steht, aus show.gif das hide.gif zu machen.

Vielen Dank für etwas Nachsicht mit JS Neulingen!

Sehr Hilfreich das Ganze ansonsten!

Schon hilfreich das ganze, jedoch wird bei Seitenaufruf der zu versteckende Text gleich angezeigt. Erst nach einem Doppelklick wird der Inhalt weggeblendet. Anscheinend gehorcht der Inhalt dem css-Befehl display : none; nicht.
(Bin Firefox-User)

Kommentar schreiben:

RSS-Feed

Impressum/Datenschutz/AGB