Ani hat sich Wunschbuch erkundigt, wie man Textinhalte über einen Link auf- und wieder zuklappen kann.
Wie meistens im Leben gibt es dafür verschiedene Lösungswege. :o)
Ich persönlich finde den Einsatz des mootools-Framework hier sehr schick.
SmartSlider
Ralf Hortt von horttcore.de hat, basierend auf mootools, das Skript SmartSlider entwickelt, das ihr hier herunterladen könnt: SmartSlider @ horttcore.de
Das Ganze funktioniert denkbar einfach: ihr ladet die Datei mootools.js (die ihr hier findet) zusammen mit der smartslider.js auf euren Webspace.
Diese beiden Dateien müssen nun im Head-Bereich eurer Webseite eingebunden werden:
<script type="text/javascript" src="http://domain.de/mootools.js"></script>
<script type="text/javascript" src="http://domain.de/smartslider.js"></script>
Um euren Inhalt aufklappbar zu machen, braucht ihr zweierlei: den Link und den aufzuklappenden Inhalt.
Der Link fungiert als Anker, das heißt, ihr setzt als Linkziel den Namen der ID des Inhaltselements mit einem # vorne dran. Wichtig ist, dass der Link das Klasse slider angehört.
<a href="#aufklappen" class="slider">klick mich</a>
<p id="aufklappen">Ich bin der Inhalt...</p>
Ihr könnt beliebig viele dieser aufklappbaren Texte auf eurer Seite unterbringen, allerdings darf jede ID nur einmal vergeben werden.
Falls eure Besucher JavaScript abgeschaltet haben, wird ihnen der ansonsten zunächst verborgene Inhalt ganz normal angezeigt.
SmartSlider für WordPress
Für WordPress-Nutzer gibt es SmartSlider sogar eigens als Plugin zum Herunterladen.
Wie jedes andere Plugin auch wird der Ordner smartslider in das Verzeichnis wp-content/plugins hochgeladen und das Plugin anschließend aktiviert.
Die aufzuklappenden Textbereiche kennzeichnet ihr wie oben beschrieben (dazu müsst ihr beim Erstellen eines Artikels oder einer Seite allerdings die HTML-Ansicht nutzen und nicht den visuellen Editor!)
Wichtig: mootools funktioniert nicht, wenn ihr bereits ein anderes Framework wie etwa jQuery verwendet!
neontrauma, 23 Jahre alt, Studentin und freiberufliche Webdesignerin, liebt Coding & Fotografie und wohnt in Leverkusen. 
Super! Ist ja viel einfacher, als ich dachte und weniger verwirrend, als ich in anderen Tuts gelesen hab’.
Da ich WordPress benutz’ kann ich mir ja einfach das Plugin runterladen.
Danke schön!!
Bei mir funktioniert das irgendwie nicht. Welches mootools muss ich denn da runterladen bzw. was mache ich denn falsch, wenn ich die zwei tags habe:
…
Überblick
xxx
yyy
…(ist nur ein Ausschnitt)
die Mootools Datei ist auf dem Server und die smartslider Datei auch aber es klappt nicht.
Oh den Ausschnitt hat es nicht reingestellt. Ich schreibs mal ohne links:
…
xxx
-a href=”/übersicht.php”>Übersicht-/a-
-a href=”/yyy.php”>yyy-/a-
…
Ok ich habs. Ich glaub ich hatte die falsche mootools datei oder so
Bei mir funktioniert’s grade auch nicht – kann es sein, dass man die falsche MooTools-Datei gewählt hat? Welche soll man denn am Besten runterladen? Oder an was könnte es sonst liegen?
Der Text, der eigentlich versteckt sein sollte, ist bei mir immer noch sichtbar.
@ Ani:
nutzt du denn sonst noch JavaScript-Frameworks? Also zum Beispiel jQuery? Das verwenden diverse Plugins. Guck am besten einfach in den Quelltext deiner Seite, ob da im Head-Bereich irgendwelche *.js-Dateien eingebunden werden.
Wenn du das Plugin nutzt, brauchst du keine zusätzlichen Dateien herunterzuladen.
Nein nein, im Moment arbeite ich nicht mit WP, daher muss ich das Ganze ja anders lösen. Deshalb kann’s daran ja nicht liegen. :/
Hey, gibt es das Tool noch Smartslider noch irgendwo zum download? die Seite scheint ja nun nicht mehr zu funktionieren, und wie es scheint wird es das in den nächsten Wochen auch nicht…
@ Christian:
mh, ich habe es jetzt auch nirgendwo sonst gefunden – aber guck mal, was mit dem WordPress-Plugin ist. Bin zugegebenermaßen gerade zu faul zum Ausprobieren, aber die *.js-Files im Plugin müssten ja die Gleiche sein, die man auch für die Nicht-WordPress-Variante nutzt.