Einzelnen Post-Abschnitt per Klick einblenden und wieder ausblenden

Will man, einen bestimmten Post-Abschnitt erst angezeigen lassen, wenn darauf geklickt wird, kann man das mit jQuery, JavaScript, CSS und Div-Containern realisieren. Mit dieser Methode kann man z.B. eigene Übersetzungen oder zusätzliche Details für besonders Interessierte anhängen, ohne, dass die Übersichtlichkeit des Posts leidet. Man kann das selbstverständlich auch auf Seiten und in HTML-Gadgets nutzen, innerhalb von Posts kommt der Bedarf aber wohl häufiger vor.

---

Das Folgende funktioniert zwar unter der Mobil-Adresse noch, aber unter der Desktop-Adresse nicht mehr. Wieso, weiß ich noch nicht. Stand: 24.03.2018

Beispiele

Dieser Satz kann per Klick in Englisch oder in Französich übersetzt werden. Etwas mehr Text und mehr und mehr und noch mehr.

English «

This sentence can be translated by clicking in English or in French. Slightly more text and more and more and more.

» Shut down

Français «

Cette phrase peut être traduit en cliquant en anglais ou en français. Un peu plus du texte et plus et de plus en plus.

» Fermer

Aber nicht nur Texte können einausgeblendet werden, sondern auch Ifames, Bilder oder Tabellen:

Iframe «

» Schließen

Bild «

» Schließen

Bild-Tabelle «

Bildunterschrift

» Schließen

Code

Vier Code-Teile sind nötig, damit man einen Abschnitt erst verbergen, via Klick einblenden und auch wieder ausblenden lassen kann.

1. jQuery
2. JavaScript
3. CSS
4. HTML mit vier verschachtelten Div-Containern, in deren Mitte man den entsprechenden Inhalt stellt.

jQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

Dieser Code muss unter Vorlage > HTML bearbeiten direkt über </head> eingetragen werden.

JavaScript

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(".button").click( function() {$(this).parent().toggleClass("click")});
});//]]>
</script>

Auch dieser Code muss unter Vorlage > HTML bearbeiten direkt über </head> eingetragen werden.

Screenshot von diesem und dem vorigen Code über </head> - Anzeigen «

» Ausblenden

CSS

/*Einzelne Postabschnitte einblenden und wieder ausblenden - Anfang*/
.button {
    margin:-0.3em 1em 0.3em 1em;
    cursor:pointer;
    color:#c00;
    font-weight:bold;
}
.hidden #auf {
    display: block;
    text-align:right;
}
.hidden #zu{
    display: none;
}
.hidden .einausblenden {
    display: none;
}
.click #auf {
    display: none;
}
.click #zu {
    display: block;
}
.click .einausblenden {
    display: block;
}
/*Einzelne Postabschnitte einblenden und wieder ausblenden - Ende*/

Dieser Code kann unter Vorlage > HTML bearbeiten vor bzw. über ]]></b:skin> eingetragen werden oder unter Vorlage > Anpassen > Erweitert > CSS hinzufügen. Die Farbe des Klicktextes (.button) kann man selbstverständlich ändern.

Screenshot von diesem Code über ]]></b:skin> - Anzeigen «

» Ausblenden

HTML

<div class="hidden">
<div class="button" id="auf">
Klicktext für das Öffnen «
</div>
<div class="einausblenden">
Ein- und ausblendbarer Inhalt.
</div>
<div class="button" id="zu">
» Klicktext zum Schließen
</div>
</div>

Dieser Code muss im HTML-Modus des Blogger-Editors in den Post eingetragen werden. Am besten setzt man ihn nach dem Zusammestellen des Postinhalts um den Inhalt der ein- und ausblendbar sein soll (hier orange dargestellt).

---

Ursprüngliche Quelle und Urheber

Die Methode fand ich dort vorgestellt: http://jsfiddle.net/oliverdoetsch/8Tuzy/3/
und ist vom gleichen Autor auch dort zu finden: http://www.5202.de/2011/12/blogger-texte-ein-ausklappen.html
Urheber der wesentlichen Teile des Codes ist somit Oliver Doetsch.

Den bei ihm angegebenen Code habe ich etwas verändert. Begründung:

• Die Kurzform des JavaScripts funktioniert nur wenn man den Script-Code unterhalb des auszublenden Abschnitts einträgt. Diese Einschränkung ist nicht nötig. Die Langform des JavaScripts, wie ich sie empfehle, funktioniert auch dann, wenn man sie im Post oberhalb des auszublenden Abschnitts oder gleich oberhalb von </head> einträgt.
• Span-Tags ohne Style-Angaben darin werden gelöscht, wenn man im Blogger-Editor zwischen HTML-Modus und Verfassen-Modus wechselt. Man müsste somit immer im HTML-Modus bleiben oder die Span-Tags nach einem Wechsel neu eintragen. Diese Einschränkung kann durch Div-Tags vermieden werden.
• Außerdem wollte ich nicht nur Text, sondern auch andere Elemente ein- und ausblenden können, wie Iframes, Bilder und Tabellen. Die schlankste und am simpelsten merkbare Lösung war deshalb ein Div-Tag mit einer Klasse, das ein- und ausgeblendet wird und egal welchen Inhalt haben kann.

Wegen der Änderungen und in Verbindung damit, dass Oliver Doetsch in seinem Blog schreibt, dass er es erlaubt, habe ich hier nicht nur zu ihm verlinkt, sondern auch die Codes notiert.

---

In den Dynamischen Ansichten muss man etwas anders vorgehen

Auch in den Dynamischen Ansichten kann man mit der Methode in Posts und Seiten einzelne Abschnitte ein- und ausblenden. Man muss dort aber etwas anders vorgehen.

jQuery nicht eintragen

In den Dynamischen Ansichten benötigt man kein jQuery, weil dies bereits implementiert ist. Den jQuery-Code muss man nicht nur nicht eintragen, man darf es auch nicht.

Den kürzeren JavaScript-Code wählen und im Post unter dem Inhalt eintragen

In den Dynamischen Ansichten funktioniert weder die längere noch die kürzere JavaScript-Code-Version, wenn man sie unter "HTML bearbeiten" einträgt. Der längere JavaScript-Code funktioniert auch im Post-HTML nicht. Der kürzere JavaScript-Code funktioniert jedoch, wenn man ihn im Post unter dem Inhalt einträgt.

Dies ist der kürzere JavaScript-Code:

<script type="text/javascript">
$(".button").click( function() {$(this).parent().toggleClass("click")});
</script>

CSS und HTML genau wie in nicht-dynamischen Vorlagen eintragen

CSS und HTML werden in den Dynamischen Ansichten genauso eingetragen wie in den nicht-dynamischen Vorlagen.

Ute Ziemes, sg.utez.de, 2015-02-13