8.12.11
Blogger: Texte ein-/ausklappen
Ein kleines jQuery-Script um 'Text-mitten-im-Post-ein-und-ausklappen". Klick auf "auf»" und der verborgene Text wird sichtbar.Wer reitet so spät durch Nacht und Wind? Es ist der Vater mit seinem Kind; Er hat den Knaben wohl in dem Arm, Er faßt ihn sicher, er hält ihn warm.
(Der verborgene Inhalt:)
Mein Sohn, was birgst du so bang dein Gesicht? Siehst, Vater, du den Erlkönig nicht? Den Erlenkönig mit Kron’ und Schweif? Mein Sohn, es ist ein Nebelstreif. —
„Du liebes Kind, komm, geh mit mir! Gar schöne Spiele spiel’ ich mit dir; Manch’ bunte Blumen sind an dem Strand, Meine Mutter hat manch gülden Gewand.“ —
Mein Vater, mein Vater, und hörest du nicht, Was Erlenkönig mir leise verspricht? Sei ruhig, bleibe ruhig, mein Kind; In dürren Blättern säuselt der Wind. —
„Willst, feiner Knabe, du mit mir gehn? Meine Töchter sollen dich warten schön; Meine Töchter führen den nächtlichen Reihn Und wiegen und tanzen und singen dich ein.“ —
Mein Vater, mein Vater, und siehst du nicht dort Erlkönigs Töchter am düstern Ort? Mein Sohn, mein Sohn, ich seh’ es genau: Es scheinen die alten Weiden so grau. —
„Ich liebe dich, mich reizt deine schöne Gestalt; Und bist du nicht willig, so brauch’ ich Gewalt.“ Mein Vater, mein Vater, jetzt faßt er mich an! Erlkönig hat mir ein Leids getan! —
Dem Vater grauset’s; er reitet geschwind, Er hält in Armen das ächzende Kind, Erreicht den Hof mit Mühe und Not; In seinen Armen das Kind war tot.
Erlkönig ist eine Ballade von Johann Wolfgang von Goethe, die er im Jahre 1782 geschrieben hat.
Die Idee
Zum selber ausprobieren gibt's einen Fiddler. Ein-/Ausklappen geschieht mit HTML und CSS. Das jQuery Script gibt durch einentoggler dem <div> Container mit der Klasse class="hidden"; die class="click"; und umgekehrt. Für die Klassen class="hidden"; und class="click"; werden durch display:none; und display;block; der Text und die Buttons ein- beziehungsweise ausgeblendet. Die Darstellung erfolgt also über CSS, jQuery gibt dem Elternelement der Buttons abhängig vom 'Klick-Ereignis' lediglich eine andere Klasse. Viele Lösungen die ich gefunden habe, machen das Ein-/Ausblenden direkt mit Javascript, was ich für zu kompliziert halte. Der Code
<style>
.button {
margin:-0.3em 1em 0.3em 1em;
cursor:pointer;
color:#c00;
font-weight:bold;
}
/* unclicked style .hidden */
.hidden #auf {
display: block;
text-align:right;
}
.hidden #zu {
display: none;
}
.hidden span {
display: none;
}
/* clicked style .click */
.click #auf {
display: none;
}
.click #zu {
display: block;
}
.click span {
display: block;
}
</style>
<script type="text/javascript">
$(".button").click( function() {$(this).parent().toggleClass("click")});
</script>
<div class="hidden">
<div class="button" id="auf">weiter»</div>
<span>verborgene Inhalt</span>
<div class="button" id="zu">«zurück</div>
</div>
Die Anwendung
Damit das ganze funktioniert, braucht ihr das jQuery-Framework - das ist standardmässig bei den dynamischen Ansichten dabei, in den 'normalen' Layouts dagegen nicht, d.h. ihr müsst es vorher noch in euren Blog einbinden. Dazu sucht ihr den</head> Tag im HTML-Quelltext und kopiert direkt _davor_ dieses Script:<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">That's all. Ihr benützt damit die Google AJAX Libraries, das ist die schnellste und sicherste Möglichkeit, das jQuery Framework in den Blog zu bekommen. Wichtig: Die Zahl '1' bedeutet, das Google automatisch immer die neuste Version von jQuery ausliefert, unabhängig welche Versionsbezeichnung gerade die aktuellste ist.
</script>
Zum einmaligen ausprobieren könnt ihr nun den Code so wie er ist in der HTML-Ansicht vom Editor in einem Post kopieren, das wird funktionieren.
Wenn ihr das öfters als einmal machen wollt, legt das jQuery Script in ein HTML/Java Gadget und platziert es so tief wie möglich, am besten in den Footer.
<script type="text/javascript">Die CSS kommt im Vorlagen Designer in die Box CSS hinzufügen und zwar _ohne_
$(".button").click( function() {$(this).parent().toggleClass("click")});
</script>
<style> Anweisungen..button {
margin:-0.3em 1em 0.3em 1em;
cursor:pointer;
color:#c00;
font-weight:bold;
}
/* unclicked style .hidden */
.hidden #auf {
display: block;
text-align:right;
}
.hidden #zu {
display: none;
}
.hidden span {
display: none;
}
/* clicked style .click */
.click #auf {
display: none;
}
.click #zu {
display: block;
}
.click span {
display: block;
}
Das HTML kopiert ihr in der HTML-Ansicht des Editors in den Post:<div class="hidden">
<div class="button" id="auf">weiter»</div>
<span>verborgene Inhalt</span>
<div class="button" id="zu">«zurück</div>
</div>