Text
Plugin Akkordeon
Über einen klickbaren Titel-Balken kann ausgeblendeter Inhalt eingeblendet werden.
Dies hält den Seiteninhalt kompakt. Detailinformationen werden nach Klick sichtbar und wirklich nur bei Interesse eingeblendet. Der Seitenbesucher muß aktiv werden.
Dies hält den Seiteninhalt kompakt. Detailinformationen werden nach Klick sichtbar und wirklich nur bei Interesse eingeblendet. Der Seitenbesucher muß aktiv werden.
Ich habe in folgenden Umgebungen getestet:
- PHP 7.4, PHP 8.0 - 8.4
- mozilo Version 2.0 Rev. 55
- mozilo 3.x
- PHP 7.4, PHP 8.0 - 8.4
- mozilo Version 2.0 Rev. 55
- mozilo 3.x
Syntax allgemein:
{Akkordeon|optionale Klassen|Inhalt}
- Akkordeon = Pluginname
- optionale Klassen = erster Parameter; kann leer bleiben; gestattet aber die indiv. Gestaltung
- Inhalt = zweiter Parameter; enthält 1 bis n einzelne Elemente der Art Klicktitel / ausgeblendeter Inhalt
Plugin im Editor einfügen - diese Struktur wird automatisch erzeugt:
{Akkordeon | optionale Klassen |
item
Titel 1 = hier steht Klicktitel; sichtbarer Balken
content
Inhalt 1 = hier wird der gesamte Inhalt eingepflegt; ist normal ausgeblendet
item
Titel 2
content
Inhalt 2
weitere Elemente als Kombination item + content
}
{Akkordeon|optionale Klassen|Inhalt}
- Akkordeon = Pluginname
- optionale Klassen = erster Parameter; kann leer bleiben; gestattet aber die indiv. Gestaltung
- Inhalt = zweiter Parameter; enthält 1 bis n einzelne Elemente der Art Klicktitel / ausgeblendeter Inhalt
Plugin im Editor einfügen - diese Struktur wird automatisch erzeugt:
{Akkordeon | optionale Klassen |
item
Titel 1 = hier steht Klicktitel; sichtbarer Balken
content
Inhalt 1 = hier wird der gesamte Inhalt eingepflegt; ist normal ausgeblendet
item
Titel 2
content
Inhalt 2
weitere Elemente als Kombination item + content
}
Über einen Klassennamen kann das Aussehen differenziert gesteuert werden.
- Layout (Breite, Abstand)
- Frame (Rand, Schatten, Ecken)
- Color (Farbschema)
- Content (Anordnung Inhaltselemente)
- Icon (Symbol in Titelbalken)
Diese Klassen sind bereits angelegt. Details in der readme.txt
Beispiele können aus der Datei Kopiervorlagen.txt kopiert und in eine Inhaltsseite eingefügt werden.
Diese Gestaltungsklassen sind anpaßbar. Es können neue / eigene Klassen erstellt werden.
Siehe Beispiele 1 - 3 weiter unten.
Hinweis!
Bleibt der 1. Parameter leer, greift ein sauberes Standardformat.
- Layout (Breite, Abstand)
- Frame (Rand, Schatten, Ecken)
- Color (Farbschema)
- Content (Anordnung Inhaltselemente)
- Icon (Symbol in Titelbalken)
Diese Klassen sind bereits angelegt. Details in der readme.txt
Beispiele können aus der Datei Kopiervorlagen.txt kopiert und in eine Inhaltsseite eingefügt werden.
Diese Gestaltungsklassen sind anpaßbar. Es können neue / eigene Klassen erstellt werden.
Siehe Beispiele 1 - 3 weiter unten.
Hinweis!
Bleibt der 1. Parameter leer, greift ein sauberes Standardformat.
Hier werden für n Elemente die Inhalte immer als Paar definiert:
- Klicktitel (item) + einzublendender Inhalt (content)
item --> definierter Befehl; Titel (WICHTIG! mit -- davor und danach)
content --> definierter Befehl; Inhalt (WICHTIG! mit -- davor und danach)
item
- sollte kurz und prägnant sein
- kann mehrzeilig sein
- Bild als Icon möglich
content
- kann jede Form von Inhalt aufnehmen
(Text, Bilder, Tabellen, Plugins etc.)
- Klicktitel (item) + einzublendender Inhalt (content)
item --> definierter Befehl; Titel (WICHTIG! mit -- davor und danach)
content --> definierter Befehl; Inhalt (WICHTIG! mit -- davor und danach)
item
- sollte kurz und prägnant sein
- kann mehrzeilig sein
- Bild als Icon möglich
content
- kann jede Form von Inhalt aufnehmen
(Text, Bilder, Tabellen, Plugins etc.)
Im Admin sind derzeit 4 Einstellungen möglich:

1. Mehrere Inhalte gleichzeitig geöffnet erlauben? Checkbox Ja/Nein
- Haken gesetzt --> bei Klick auf weitere Elemente bleiben bereits geöffnete Elemente offen
- Haken nicht gesetzt --> bei Klick auf weitere Elemente werden bereits geöffnete Elemente geschlossen
2. Erstes Element beim Laden geöffnet anzeigen? Checkbox Ja/Nein
- Haken gesetzt --> erstes Element bei Seoitenaufruf bereits geöffnet
- Haken nicht gesetzt --> alle Elemente geschlossen
3. Animationsdauer in Millisekunden
- darüber läßt sich steuer, wie schnell Inhalte aufgeklappt / geshlossen werden
4. Standardsymbol vor Titel
- es stehen 4 verschiedene Symbole zur Auswahl (Büroklammer, Dreieck, Pfeil, Pfeil im Kreis)
Wichtiger Hinweis!
Diese Angaben gelten für jeden Plugineinbau auf der Seite!
Das heißt, wenn erstes Element beim Seitenaufruf offen sein soll, dann ist es offen bei allen Akkordeons.

1. Mehrere Inhalte gleichzeitig geöffnet erlauben? Checkbox Ja/Nein
- Haken gesetzt --> bei Klick auf weitere Elemente bleiben bereits geöffnete Elemente offen
- Haken nicht gesetzt --> bei Klick auf weitere Elemente werden bereits geöffnete Elemente geschlossen
2. Erstes Element beim Laden geöffnet anzeigen? Checkbox Ja/Nein
- Haken gesetzt --> erstes Element bei Seoitenaufruf bereits geöffnet
- Haken nicht gesetzt --> alle Elemente geschlossen
3. Animationsdauer in Millisekunden
- darüber läßt sich steuer, wie schnell Inhalte aufgeklappt / geshlossen werden
4. Standardsymbol vor Titel
- es stehen 4 verschiedene Symbole zur Auswahl (Büroklammer, Dreieck, Pfeil, Pfeil im Kreis)
Wichtiger Hinweis!
Diese Angaben gelten für jeden Plugineinbau auf der Seite!
Das heißt, wenn erstes Element beim Seitenaufruf offen sein soll, dann ist es offen bei allen Akkordeons.
- Verbesserung Barrierefreiheit
- Robustheit im Code erhöhen
- Dokumentation überarbeiten
- Eigene Gestaltungsvarianten, ohne Updatefähigkeit zu gefährden
- Scrollverhalten optimiert
- Neuer Parameter: Auswahl Symbol vor Titel
- Robustheit im Code erhöhen
- Dokumentation überarbeiten
- Eigene Gestaltungsvarianten, ohne Updatefähigkeit zu gefährden
- Scrollverhalten optimiert
- Neuer Parameter: Auswahl Symbol vor Titel
1. Beispiel - Standard-Aussehen; ohne Klassen

Textabschnitte
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.
Code zu Beispiel 1
{ Akkordeon | |--item-- Info-Bild Titel 1, Lightbox im Inhalt --content-- Plugin Lightbox
--item-- mozilo LOGO, Titel 2, Textabsätze --content-- Textabsätze
}
2. Beispiel - volle Breite, sandfarben, keine Abrundung
Bildlinks
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.
FlexCards
Text
Text
Code zu Beispiel 2
{ Akkordeon | akk-layout-full akk-theme-sand akk-frame-square |--item-- Titel 1, Bildlinks, Plugin FlexCards --content-- Bildlinks mit Text + Plugin FlexCards
--item-- Titel 2, Plugin PhotoSwipe --content-- PhotoSwipe
}
3. Beispiel - Breite schmal, Farbschema dunkel
Code zu Beispiel 3
{ Akkordeon | akk-layout-small akk-theme-dark akk-icon-dreieck-weiss |--item-- Titel 1 --content-- Inhalt
--item-- Titel 2 --content-- Inhalt
}
4. Beispiel - Modifikation des Symbols vor Titel
5. Beispiel - Titel großzügiger; Bild links; Floating-Text
Inhalt 1
Inhalt 2
Code Beispiel 5
{ Akkordeon | akk-layout-tile |--item--
[ bildlinks | @=Inhalte:Eulen-200.jpg=@ | alt= ] Beschreibung Titel 1
--content--
Inhalt 1
--item--
[ bildlinks | @=Inhalte:Wolf-200.jpg=@ | alt= ] Titeltext
--content--
Inhalt 2
}