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.

auf»

Die Idee

Zum selber ausprobieren gibt's einen Fiddler. Ein-/Ausklappen geschieht mit HTML und CSS. Das jQuery Script gibt durch einen toggler 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&#187;</div>   
                <span>verborgene Inhalt</span>   
           <div class="button" id="zu">&#171;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">
</script>

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.

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">
$(".button").click( function() {$(this).parent().toggleClass("click")});
</script>

Die CSS kommt im Vorlagen Designer in die Box CSS hinzufügen und zwar _ohne_ <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&#187;</div>   
                <span>verborgene Inhalt</span>   
           <div class="button" id="zu">&#171;zurück</div>                       
</div>

Und weiter?

Probiert das in dynamischen Ansichten - solange es dort [noch] keine HTML/Java Gadgets gibt - besser nicht aus. Es funktioniert, aber nur mit einem einzigen Post. In den 'normalen' Layouts sollte es dagegen mit allen Browser problemlos klappen. Das schöne an jQuery Script ist, dass ihr euch nicht mit Browserkompatibilität o.ä. rumschlagen müsst, die bringt das Framework von Haus aus mit. Für einen eigenen 'Jump-Break', Fotos mitten im Post oder Lösungen zu Aufgaben, könnte ich mir das als hilfreich vorstellen.