Akkordeon-Effekt einbinden

Info Box

In dieser Anleitung zeigen wir Ihnen die Erstellung des Akkordeon-Effekts, wie wir ihn auch in unserem Beitrag „Was Lehrende zur Blognutzung motiviert“ oder in unsere FAQ eingesetzt haben.

Dafür melden Sie sich in Ihrem Portfolio an und navigieren von der Startseite links im Menü auf den Punkt „Lehrtagebuch“. Anschließend klicken Sie auf den Button „Erstellen“, um den Akkordeon-Effekt in einem neuen Beitrag zu verwenden.

Nachdem Sie die Überschrift des Beitrags im oberen Textfeld eingegeben haben, können Sie in dem unteren größeren Textfeld jetzt den gesamte Artikel schreiben und formatieren. In diesem Textfeld wird auch der Akkordeon-Effekt eingefügt.

Dies erfolgt in der Auszeichnungssprache HTML. Um diese anwenden zu können, wechseln Sie der Ansicht des Textfeldes von „Visuell“ auf „Text“.

neuer Beitrag

Zunächst geben Sie den HTML-Code für den Beginn des Akkordeons ein (1). Danach folgt die Überschriftenzeile, in die Sie ihre individuelle Überschrift einfügen können (2). Dann haben Sie die Möglichkeit, Ihren Inhalt in das Akkordeon einzutragen (3) und diesen Abschnitt wieder zu schließen (4). Wichtig für die korrekte Anzeige des Akkordeons ist auch das Beenden des anfänglichen Startbefehls (5).

Diesen HTML Code für einen Akkordeon-Effekt haben wir für Sie am Ende dieser Seite so aufbereitet zur Verfügung gestellt, dass Sie ihn einfach kopieren und in ihren Text-Editor einfügen können.

Erstes Akkordeon

 

Wenn Sie alles wie eben beschrieben in den Text-Editor eingegeben haben, sieht Ihr erstes Akkordeon so aus:

 

Beitrag veröffentlichen

 

Um sich diese Vorschau Ihres Akkordeons anzusehen, gehen Sie rechts in der Box „Veröffentlichen“ auf „Vorschau“.

 

 

Fahren Sie mit der Maus über die dunkelgrüne Zeile, wird Ihnen die Möglichkeit angezeigt, das zugehörige Textfeld auszuklappen. Klicken Sie mit der Maus auf die dunkelgrüne Zeile, klappen Sie das Textfeld aus und wieder ein.

zwei komplette Akkordeons von Außen

Wenn Sie eine einen weiteren Akkordeon-Abschnitt wie rechts abgebildet einfügen möchten…

 

 

 

 

… fügen Sie einfach die oben beschrieben Textbefehle zwei bis vier unter Textbefehl vier ein.

Auch diesen HTML Code haben wir für Sie am Ende dieser Seite als Text zum kopieren und einfügen aufbereitet.
Ihr HTML-Code sollte dann wie folgt aussehen:

Natürlich können Sie über oder unter Ihr Akkordeon weitere Inhalte zu Ihrem Beitrag schreiben oder mehrere Akkordeons zu unterschiedlichen Themen auf einer Seite untereinander gestalten.


HTML Code für einen Akkordeon-Effekt

<div class="accordion first_hidden">
<div class="accordion">
<div class="acchead">Überschrift Eins</div>
<div class="accbody">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>

HTML Code für zwei Akkordeon-Effekte

<div class="accordion first_hidden">
<div class="accordion">
<div class="acchead">Überschrift Eins</div>
<div class="accbody">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="acchead">Überschrift Zwei</div>
<div class="accbody">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht.

Ihr Kommentar erscheint gegebenenfalls erst nach Freigabe durch den/die InhaberIn dieses Portfolios.