Meine Website

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.

Ich habe in folgenden Umgebungen getestet:
- 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
}

Ü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.

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.)
Im Admin sind derzeit 4 Einstellungen möglich:
Bild "Freie_Plugins:akko-admin.jpg"
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

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

Bild "Home:mozilo.png"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

Titel
Text
Fuß

Titel
Text
Fuß

Titel
Text
Fuß


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

Beliebiger Inhalt

Inhalt 2

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

Inhalt 1

Inhalt 1

Inhalt 1

Inhalt 1

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
}