mooaccordion - Content-Plugin für Joomla!

Eine interessante Technik, um Beiträge in unterschiedlichen Informationstiefen zu gestalten, sind einklappbare Textstellen, die Details oder zusätzliche, weiterführende Informationen enthalten. Wird dieser Effekt in einem senkrechten Menü verwendet, nennt man ihn auch Accordion. Collapse ist das englische Wort für einklappen.

Hier ein Beispiel:

Es gibt verschiedene Erweiterungen, die diese Funktionalität bieten, in diesem Beispiel wird sie mit dem Plugin MooAccordion umgesetzt. Die Konfiguration als auch die Implementierung in einen Beitrag ist relativ aufwändig bzw. setzt sie ein Arbeiten im Quellcode voraus oder einen festgelegten Workflow mit im JCE hinterlegten eigenen Klassen.

Das Plugin gibt es hier zum Download.

Lade dir das Plugin herunter und installiere es im Jooml!-Backend über das Menü Erweiterungen > Verwalten > Installieren. Anschließen muss das Plugin noch unter Erweiterungen > Plugins in der Liste aktiviert werden. Das Plugin bietet keine weiteren Konfigurationsmöglichkeiten außer der Hinterlegung von CSS-Regeln. Verwende dazu aber besser das eigene benutzerdefinierte Stylesheet (user.css). Außerdem findest du in der zweiten Registerkarte des Plugins eine (anstrengende) Gebrauchsanweisung.

Funktionsweise des Plugins

Die Konfiguration des Plugins findet direkt im Beitrag statt und wird mit folgender Syntax aufgerufen:

{content-mooaccordion [OPTIONS]}

Pro Accordion-Gruppe eine Konfiguration zur Änderung, ohne Konfiguration wird das Accordion mit Standardwerten angezeigt. Bei mehreren Accordions mit Standardwerten muss das Plugin nur einmal aufgerufen werden. Folgende Optionen können konfiguriert werden:

• id='cssid'
  HTML ID des Eltern-Elements, dem die Einstellung zugewiesen wird.
• allowallclosed
  erlaubt, dass ALLE Elemente der Gruppe geschlossen sein dürfen
• display='number'
  Nummer des Elementes, das standardmäßig geöffnet sein soll. Nummer des ersten Elements: 0
• openedclass='[classnames]'
  CSS-Klassen für Elemente des offenen Plugins
• closedclass='[classnames]'
  CSS-Klassen für Elemente des geschlossenen Plugins
• template='number'
  Vordefinierte CSS-Vorlage. Dabei werden die opendedclass und closedclass-Optionen überschrieben. Es gibt drei vordefinierte Templates mit den Nummern 1, 2 und 3.

In obigem Beispiel habe ich die folgende Konfiguration eingesetzt:

"content-mooaccordion id='mooaccordion0' openedclass='toggleopen' closedclass='toggleclose' allowallclosed"

Anbringen des Accordions

Erhält nun ein Element die Klasse mooaccordion, so wird das folgende Element zum "einklappbaren" Inhalt. Um mehrere Elemente einzuschließen, kann man einen Container (div) rundherum legen.

Für das Anbringen der Konfiguration wird nun noch ein Container mit der Klasse jener id herumgelegt, die in der Konfiguration festgelegt wurde. In obigem Beispiel sieht der HTML-Code im Editor folgendermaßen aus:

Eingeklappt wird hier also der innere namenlose div, das erste Element, das nach der H6 mit der Klasse "mooaccordion" kommt.

Gestaltung des Accordions mit CSS

Abhängig von der gewählten Konfiguration fügt das Plugin für die Ausgabe auf der Website ein Element sowie zusätzliche Klassen ein. Diesen können nun in der user.css (bzw. im CSS-Feld des Plugins) Regeln zugewiesen werden.

Im Falle des obigen Beispiels ergänzt das Plugin den Template-Code folgendermaßen (Ergänzungen rot):

• Das Plugin hat den "inneren" Container mit einem weiteren Container umschlossen, der ebenfalls die id mooaccordion0 hat, sowie die Klassen mooaccordioncontainer und mooaccordioncontainer0.
  Aufgrund der doppelten id mooaccordion0 scheint die Konfiguration nicht ganz richtig zu sein, entfernt man aber den äusseren div, funktioniert das Accordion nicht mehr.
• Dem Titel-H6-Tag wurden die Klassen mooaccordion, mooaccordion0, mooaccordionopen und die in der Konfiguration angegebene Klasse toggleopen hinzugefügt.
• Anschließend wurde zwischem dem Tag und dem Titeltext ein weiterer div mit der Klasse mooaccordionicon eingefügt - um das Umschaltsymbol einzufügen.
• Nicht angeführt ist der Inline-Style des divs, der den Einklapptext umschließt.

Dies gibt uns genug ids und Klassen, um den Einklapptext zu formatieren. Für das Umschaltsymbol wurde folgende Grafik verwendet:

Folgende CSS-Regeln wurden erstellt:

 Quelle: Ich, und die Dokumentation von MooAccordion https://www.richeyweb.com/documentation/14-mooaccordion