Akkordeon/Accordion

Mit dem Interface-Element “Akkordeon” kann man lange Seiten übersichtlicher gestalten. Teile des Inhalts werden anfangs in zugeklappter Form dargeboten. Der Besucher sieht zunächst nur die Überschrift. Klickt die Besucherin auf die Überschrift, wird der zugehörige Textkörper sichtbar gemacht. Diese Seite selbst ist ein Beispiel.

Wie Akkordeon funktioniert

Als klickbare HTML-Elemente (“Akkordeon-Überschrift”) können Sie verwenden:

Das klickbare HTML-Element (“Akkordeon-Überschrift”) wird durch eine CSS-Klasse markiert. Dadurch wird das folgende HTML-Element automatisch auf- und zuklappbar (“Akkordeon-Textkörper”).

Bedingungen:

Akkordeon-Überschrift und Akkordeon-Textkörper müssen Kind-Elemente des selben Eltern-Elements sein
und (im Quelltext) unmittelbar aufeinander folgen.

Wenn Ihnen das zu technisch ist, lesen Sie einfach weiter.

So bauen Sie Akkordeon ein

In dieser Erklärung setzen wir voraus:

Sie haben Ihren Inhalt im Rich Text Editor (RTE) erstellt, formatiert und gegliedert
Alle Zwischenüberschriften sollen Akkordeon-Überschriften werden
Akkordeon-Textkörper können aus einzelnen oder mehreren Absätzen bestehen

Eine Zwischenüberschrift klickbar machen

Setzen Sie die Schreibmarke in die Zwischenüberschrift
Wählen Sie aus der Auswahlliste “Blockstile” den Blockstil “Akkordeon-Überschrift”
Damit ist diese Zwischenüberschrift darauf vorbereitet, den unmittelbar folgenden Absatz auf- und zuzuklappen.

Einen einzelnen Absatz auf- und zuklappbar machen

Um einen einzelnen Absatz auf- und zuklappbar zu machen, müssen Sie nichts weiter tun. Es reicht, wenn Sie die diesem Absatz unmittelbar vorausgehende Zwischenüberschrift klickbar gemacht haben, wie oben im Abschnitt "Eine Zwischenüberschrift klickbar machen" beschrieben.

Mehrere Absätze auf- und zuklappbar machen

Wenn mehrere Absätze zu einer Zwischenüberschrift gehören und gemeinsam den Akkordeon-Textkörper darstellen sollen, müssen sie künstlich zu einem HTML-Element zusammengefasst werden.

Markieren Sie alle Absätze, die zusammengefasst werden sollen
Wählen Sie aus der Auswahlliste “Blockformate” das Blockformat “Behälter”

Damit sind diese Absätze zu einer Einheit zusammengefasst, ohne dass sich dabei an der Darstellung etwas ändert. Dieser Behälter mit allen in ihm enthaltenen HTML-Elementen wird nun von der ihm unmittelbar vorausgehenden Zwischenüberschrift sichtbar bzw. unsichtbar gemacht – wenn sie den Blockstil “Akkordeon-Überschrift” besitzt.

Sie können das HTML-Element div im RTE nur mit Hilfe der Pfad-Leiste (am Editor-Fenster ganz unten) markieren. Setzen Sie die Schreibmarke in einen Absatz innerhalb des Behälters und klicken Sie dann in der RTE-Pfad-Leiste auf das “div” unmittelbar vor dem “p”.

Akkordeons verschachteln

Sie können durchaus Akkordeons ineinander schachteln, indem die untergeordneten Akkordeons zu einem HTML-Element zusammenfassen, wie im Abschnitt “Mehrere Absätze klickbar machen” für Absätze beschrieben.