Gegen Bilderklau - Das Original | Druckvorschau: Auf/Zuklappen [Mini-Tutorial]

Geschrieben von brain_surgery am 13.07.2012 um 18:00:

Auf/Zuklappen [Mini-Tutorial]

Hallöchen~
Ich bins wieder einmal (alle paar heiligen Zeiten schaue ich hier vorbei) und ich bringe euch diesmal ein kleines Javascript Tutorial. Wie immer übernehme ich keine Garantie, dass mein Weg der einzige/beste ist, aber es ist getestet und klappt. (ahaha Wortwitz *brick'd*) Ich lerne selbst gerade erst JS, aber kam gerade in die Situation wo mir ein solches Skript nützlich war und ich dachte mir, warum probier ich nicht mal, das selbst zu coden. Und ich schätze es gibt sicher auch andere Leute, die so etwas nützlich finden könnten.

Was macht das Skript:
Viele kennen vielleicht die SPOILER Funktion in vielen Forensoftwares, die Text verbirgt, und mit einem Klick auf einen Button/etc erscheint der Text wieder. Klickt man noch einmal, verschwindet er erneut. Auch simple Klappmenüs funktionieren so. (Oder man denke an "Read More"s.) Ich bin schlecht im Beschreiben, ich hoffe ihr wisst was ich meine. smile

Es ist ein sehr, sehr simples und primitives Skript, das heißt es hat keine fancy Übergänge oder Slide-Effekte, aber ist einfach einzubauen und tut seinen Job.

Vorraussetzungen:
-Ein Browser/Anbieter, der Javascript unterstützt
-Ein bisschen HTML Erfahrung

Offensichtlicher Nachteil:
Da es eben so simpel ist, kann es nur ein Klappelement auf einmal manipulieren. Wenn du mehr als eines auf der selben Seite einbauen willst, musst du das Skript mehrere male einfügen, und die Funktionen nummerieren. Wie das geht kann ich bei Bedarf noch genauer erklären.

Einbau:
So weit oben wie möglich in deiner HTML Seite (zum Beispiel im <head>, es funktioniert aber auch im <body>, solange es weiter oben im Code als der zu klappende Textabschnitt ist) füge folgenden Code ein:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

<script>

function expand() 
{
	document.getElementById("readmore").style.display = "inline";
	document.getElementById("readmorelink").title = "Anklicken, um die Liste zu verbergen";
	document.getElementById("readmorelink").onclick = close;
}

function close()
{
	document.getElementById("readmore").style.display = "none";
	document.getElementById("readmorelink").title = "Anklicken, um die Liste anzuzeigen";
	document.getElementById("readmorelink").onclick = expand;
}

</script>

Nächster Schritt, man braucht natürlich auch einen Klapptext. Und irgendetwas, mit dem der Text auf- und zugeklappt wird.
Da ist euch völlige gestalterische Freiheit gegeben, aber zwei Dinge sind wichtig: die IDs und das ONCLICK in den HTML Tags.
Ansonsten hast du komplette Freiheit, und du kannst den Klapptext einbauen, wo du magst. (Oder wo du ihn eben brauchst.)

Du brauchst genau zwei Dinge:

Den Aufklapper. Der könnte so aussehen:
code:

1:

<a onclick="expand()" title="Anklicken, um die Liste anzuzeigen" id="readmorelink">»Liste zeigen</a>
Ob du nun ein <a>, ein <span> oder eine Grafik verwendest, ist hier völlig egal. Wichtig sind onclick, title und id. Diese drei Attribute müssen unbedingt vorhanden sein, und bis auf title sollten sie nicht verändert werden. Bei title kannst du eingeben was du möchtest. (Sogar oben im Javascript Teil! Die Anführungszeichen müssen aber da bleiben!)
Den Klapptext. Der könnte so aussehen:
code:

1:

<span style="display: none;" id="readmore">Blablabla ich bin ein Beispieltext. Lorem Ipsum.</span>
Auch das kann alles mögliche sein, solange die id gleichbleibt.

Das wars auch schon! Wenn es Fragen gibt oder etwas unklar ist, bitte einfach melden! Dann können wir versuchen, eine Lösung zu finden. (:

mfg, brain