>Home<

Toggle-Menü

HTML

♦Beispiel:▸ -Klick mich-

Kopiere den folgenden Code und setze ihn in den <body>-Bereich Deiner Webseite.

html

 <!-- HIER wird der Ein-/Ausklapp-Text eingefügt -->
<span class="toggle-link" onclick="toggle('text1')">ANZEIGETEXT</span>
<div id="text1" style="display: none;">DER TEXT ERSCHEINT BEIM ANKLICKEN</div>

<!-- Restlicher Inhalt deiner Seite -->

Kopiere den Stil-Code in Deine CSS-Datei.
Du kannst die Farben anschließend an Dein Design anpassen.

css

 #text1 {
display: none;
margin-top: 10px;
}
.toggle-link {
cursor: pointer;
color: blue;
text-decoration: underline;
}

Kopiere einfach das folgende Skript und füge es in den <head> -Bereich Diner Webseite ein.

 <script>
function toggle(controlId) {
var elem = document.getElementById(controlId);

if (elem.style.display === "none" || elem.style.display === "") {
elem.style.display = "block"; // Zeige das Element
} else {
elem.style.display = "none"; // Verstecke das Element
}
}
</script>

１. Was macht dieser CSS-Code?

Hier kannst Du bestimmen, wie bestimmte Elemente auf Deiner Webseite aussehen und
reagieren, zum Beispiel, ob sie sichtbar sind oder wie ein klickbarer Text-Link dargestellt wird.

css

#text1 {
display: none; 			/* Versteckt den Text am Anfang – 
				   wird später per Klick sichtbar gemacht */
margin-top: 10px; 		/* Fügt oben einen Abstand von 10 Pixeln ein, 
				   damit der Text nicht direkt an anderen Elementen klebt */
}

.toggle-link {
cursor: pointer; 		/* Ändert den Mauszeiger zur Hand – 
				   zeigt dem Nutzer: „Das kann man anklicken“ */
color: blue; 			/* Färbt den Text blau – 
				   wirkt wie ein klassischer Link */
text-decoration: underline; 	/* Unterstreicht den Text – 
				   damit er noch mehr wie ein Link aussieht */
}

♦#text1
▸ Das ist ein sogenannter CSS-Selektor.
▸ Die # bedeutet: „Suche ein Element mit der ID text1".
▸ Dieser Stil gilt für das hier im HTML:

html

<div id="text1">...</div>

→ Erklärung der Eigenschaften:
display: none;
▸ Der Text ist unsichtbar, wenn die Seite geladen wird.
▸ Erst per Klick (über JavaScript) wird er eingeblendet.
margin-top: 10px;
▸ Fügt oben 10 Pixel Abstand ein, damit der Text beim Anzeigen nicht direkt
an anderen Elementen klebt.

css

.toggle-link {
cursor: pointer;
color: blue;
text-decoration: underline;
}

♦.toggle-link
▸ Das ist ein Klassen-Selektor (erkennbar am Punkt . ).
▸ Gilt für alle Elemente mit der Klasse toggle-link, z. B.:

html

<span class="toggle-link">ANZEIGETEXT</span>

→ Erklärung der Eigenschaften:
cursor: pointer;
▸ Der Mauszeiger wird zur Hand und zeigt eine anklickbare Schaltfläche an.
color: blue;
▸ Der Text wird wie ein klassischer Link blau angezeigt.
text-decoration: underline;
▸ Der Text wird unterstrichen, um ihn als Link kenntlich zu machen.

♦ Was kannst Du anpassen?
color: → Ändere die Textfarbe nach Deinem Geschmack.
Beispiel: color: #aa8800; ergibt einen goldenen Ton.
text-decoration: → Beim Weglassen der Unterstreichung none schreiben.
cursor: → Wenn Du keinen Link-Effekt willst, kannst Du pointer weglassen.

Extra: Hover-Effekt

Du kannst einen Hover-Effekt hinzufügen für die Akzentuierung eines Links beim Überfahren mit der Maus, ohne ihn zu anzuklicken.

css

.toggle-link:hover {
color: darkblue;            	/* Wenn man mit der Maus über den Text fährt (Hover),
                                   ändert sich die Schriftfarbe zu Dunkelblau */
text-decoration: none; 		/* Die Unterstreichung verschwindet beim Darüberfahren –
				   das wirkt etwas dezenter und moderner */
}

▸ Sobald man mit der Maus über den Text fährt (ohne zu klicken):
– wird die Farbe dunkelblau
– die Unterstreichung verschwindet
✦ Das macht den Effekt dezenter und moderner.

２. JavaScript mit Kommentaren

Du kannst diesen Code entweder im <head> oder ganz unten im <body> einfügen.
Empfohlen ist, es am Ende des <body> einzufügen, damit das HTML vorher vollständig geladen wird.
Falls Du ihn im <head> verwendest, achte darauf, dass die Seite klein ist und die eingebundenen Elemente (wie #text1) schon beim Laden vorhanden sind.

html

<!-- JavaScript – am besten unten im Body oder im Head -->
<script>
// Die Funktion "toggle" wird aufgerufen, wenn jemand auf den Anzeigetext klickt.
function toggle(controlId) {

// Holt das HTML-Element mit der übergebenen ID (z. B. "text1")
var elem = document.getElementById(controlId);

// Prüft, ob das Element gerade nicht sichtbar ist
if (elem.style.display === "none" || elem.style.display === "") {

// Wenn ja, dann zeige es an
elem.style.display = "block";

} else {
// Wenn es bereits sichtbar ist, dann verstecke es
elem.style.display = "none";
}
}
</script>

Erklärung:
Dieses kleine JavaScript regelt die Sichtbarkeit eines bestimmten Bereichs auf der Webseite, je nachdem, ob man darauf geklickt hat.
Die Funktion toggle() bekommt eine ID (z. B. #text1) und steuert dann die Anzeige des passenden Elements.

Das war's auch schon von mir. 😊
Verfasst am 28.Mai 2008, aktualisiert am 18.Juli 2025

>Web-Coding Tutorials<

>Home<