Versionen im Vergleich

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.

Akkordeon

Überblick

Name

contentclass-snippet.gifAkkordeon

Ordner

folderopen.gif Andere Darstellungsarten

Styleguide

https://www.styleguide.sachsen.de/akkordeon-3949.html

Inhaltsverzeichnis

Inhalt
minLevel1
maxLevel4
outlinefalse
stylenone
typelist
printabletrue


Einleitung

Das Akkordeon-Element, eine auf-und zuklappbare Liste, ist bei Webdesignern und Onlineredakteuren ein beliebtes HTML-Gestaltungselement, um auflistbare und meist umfangreiche Informationen platzsparend darzustellen. Sehr oft findet es im Rahmen von »Häufig gestellten Fragen«, (s.g. FAQ) Anwendung. Das Akkordeon ist aber auch sehr gut dazu geeignet, Bilder und Videos darzustellen, vgl. dazu Styleguide Akkordeon und sein Einsatz ist immer eine Möglichkeit, wenn Seiten zu "lang" sind.

Panel
panelIconId1f5a5
panelIcon:desktop:
panelIconText🖥️
bgColor#EAE6FF

Verschiedene Darstellungsmöglichkeiten

Akkorden-2-und-3-Eintraege_grau.pngImage RemovedAkkorden-2-und-3-Eintraege.pngImage Added

Akkordeon mit 2 und 3 Einträgen

Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung.
In der Beispielabbildung ist die Seitenaufteilung “Navigation-Inhalt-Marginalspalte” gewählt.




Info

Siehe dazu Kapitel Auswahl der Seitenaufteilung

Akkorden-5-Eintraege.png

Akkordeon mit 5 Einträgen

Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung.
In der Beispielabbildung ist die Seitenaufteilung “Navigation-Inhalt breit (ohne Marginalspalte) gewählt.




Info

Siehe dazu Kapitel Auswahl der Seitenaufteilung

Akkordeon_eingebunden_grau.pngImage RemovedAkkordeon_eingebunden.pngImage Added

Akkordeon eingebunden

Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung.
In der Beispielabbildung ist die Seitenaufteilung “Navigation-Inhalt breit (ohne Marginalspalte) gewählt.
Um zusammengehörende Inhalte besser zu gliedern, ist das erste Akkordeon in das Element “Bild + Text” eingebunden. Das zweite Akkordeon ist in dem Element “Inhaltsteiler” eingebunden, welches die Breite des Akkordeon beeinflussen kann.

Info

Siehe dazu Kapitel Auswahl der Seitenaufteilung und Kapitel Inhaltsteiler


Panel
panelIconId270f
panelIcon:pencil2:
panelIconText✏️
bgColor#FFEBE6

Verwendung im SmartEdit

Bei der Verwendung eines Akkordeon gibt es zwei Möglichkeiten der Erstellung.

  • Standard (empfohlen)
    Erstellen eines Akkordeon mit einer vorbelegten Anzahl an Akkordeoneinträgen. Hier kann zwischen 2 bis 5 Einträgen gewählt werden.
    Die Anleitung für die schrittweise Erstellung wird im Abschnitt Akkordeon mit Akkordeoneinträgen erklärt.

  • Optionales Erstellen
    Erstellen eines Akkordeon ohne Akkordeoneinträge. Die einzelnen Einträge selbst können im Nachgang manuell hinzugefügt werden.
    Die Anleitung für die schrittweise Erstellung wird im Abschnitt Akkordeon ohne Einträge erklärt.


Erstellen Akkordeon mit Akkordeoneinträgen

Schrittweise Erläuterung für die Erstellung eines neuen Seitenschnipsel basierend auf der CMS-Vorlage “contentclass-snippet.gifAkkordeon + x Einträge”.

Symbol

Aktion

1

Seite öffnen

seite_erstellen_blau.pngImage Removedseite_oeffnen_green.pngImage Added
2icon_reddot_multilink.png

Pattern im Inhaltsbereich hinzufügen, sortieren, entfernen

pattern_hinzufuegn_blau.pngImage Removedpattern_hinzufuegn_green.pngImage Added
3AMnu_ConnectNewPage.gif

Seite erstellen & verknüpfen

seite_erstellen_green.png
4folderopen.gif

Content-Klassen Ordner “Andere Darstellungsarten” auswählen

Hinweis

Das Bildschirmfoto bildet eine allgemeine Darstellung aller Content-Klassen Ordner ab. Kann ggf. abweichen.

content_klasse-waehlen-green.pngImage Removedcontent_klasse-waehlen-green.pngImage Added
5contentclass-snippet.gif

Content-Klasse “Akkordeon + x Einträge” auswählen

  • individuelle Auswahl eines Akkordeon von 2 oder bis zu 5 Einträgen

Hinweis

Das Bildschirmfoto bildet eine allgemeine Darstellung von Content-Klassen ab. Kann ggf. abweichen.

template_waehlen_green.pngImage Removedtemplate_waehlen_green.pngImage Added
6

Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift der neuen Seite belegt werden sollte.
Diese Überschrift wird nicht auf der erstellten Seite angezeigt. Sie dient als CMS-interne Überschrift.

überschrift_seite_green.pngImage Removedüberschrift_seite_green.pngImage Added
7

Mit “OK” bestätigen

ok_green.pngImage Removedok_green.pngImage Added
8

Darstellung nach Erstellung “Akkordeon + x Einträge

Detail_menu.pngImage Added

Bearbeiten Akkordeon mit Akkordeoneinträgen

Schrittweise Erläuterung für das Bearbeiten eines neuen Seitenschnipsel basierend auf der CMS-Vorlage “contentclass-snippet.gif Akkordeon + x Einträge”.

Ansicht nach erstellen des Akkordeon aus der Vorlage “Akkordeon + 2 Einträge”. Das Akkordeon ist zur Bearbeitung der Akkordeoneinträge geöffnet.

Detail_menu.pngImage RemovedDetail_menu.pngImage Added


Bezeichnung

Beschreibung

icon_reddot_openpage (1).png Akkordeon schließen

schließt die Seite (Inhaltselement) “Akkordeon”

icon_reddot.png Seite für andere Projekte freigeben Hinweis.png

siehe Hinweis.png “Anleitung: Wie gebe ich Seite für andere Projekte frei?”

icon_reddot_multilink (1).png Akkordeoneinträge

einzelne Akkordeoneinträge hinzufügen, sortieren oder entfernen

Die schrittweise Erläuterung der einzelnen Schritte wird im Abschnitt Akkordeoneinträge erklärt.

icon_reddot_multilink (1).png Akkordeoneintrag öffnen

öffnen des “Akkordeoneintrag” zur weiteren Bearbeitung

Das Bearbeiten eines Akkordeoneintrages wird im Abschnitt Akkordeoneintrag bearbeiten erklärt.


Erstellen Akkordeon ohne Einträge

Symbol

Aktion

1

Seite öffnen

seite_erstellen_blau.pngImage Removedseite_oeffnen_green.pngImage Added
2icon_reddot_multilink.png

Pattern im Inhaltsbereich hinzufügen, sortieren, entfernen

pattern_hinzufuegn_blau.pngImage Removedakkordeon_pattern_hinzufuegen.pngImage Added
3AMnu_ConnectNewPage.gif

Seite erstellen & verknüpfen

seite_erstellen_green.pngImage Removedseite_erstellen_green.pngImage Added
4folderopen.gif

Content-Klassen Ordner “Andere Darstellungsarten” auswählen

Hinweis

Das Bildschirmfoto bildet eine allgemeine Darstellung aller Content-Klassen Ordner ab. Kann ggf. abweichen.

content_klasse-waehlen-green.png
5contentclass-snippet.gif

Content-Klasse “Akkordeon” auswählen

Hinweis

Das Bildschirmfoto bildet eine allgemeine Darstellung von Content-Klassen ab. Kann ggf. abweichen.

template_waehlen_green.png
6

Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift der neuen Seite belegt werden sollte.
Diese Überschrift wird nicht auf der erstellten Seite angezeigt. Sie dient als CMS-interne Überschrift.

überschrift_seite_green.png
7

Mit “OK” bestätigen

ok_green.png
8

Ansicht nach erstellen des Akkordeon aus der Vorlage “Akkordeon. Das Akkordeon ist zur weiteren Bearbeitung geöffnet.

Detail_menu_ohne_eintraege.pngImage RemovedDetail_menu_ohne_eintraege.pngImage Added

Bearbeiten Akkordeon ohne Einträge

Schrittweise Erläuterung für das Bearbeiten eines neuen Seitenschnipsel basierend auf der CMS-Vorlage “contentclass-snippet.gif Akkordeon”.

Ansicht nach erstellen des Akkordeon aus der Vorlage “Akkordeon. Das Akkordeon ist zur weiteren Bearbeitung geöffnet.

Detail_menu_ohne_eintraege.pngImage RemovedDetail_menu_ohne_eintraege.pngImage Added


Bezeichnung

Beschreibung

icon_reddot_openpage (1).png Akkordeon schließen

schließt die Seite (Inhaltselement) “Akkordeon”

icon_reddot.png Seite für andere Projekte freigeben Hinweis.png

siehe Hinweis.png “Anleitung: Wie gebe ich Seite für andere Projekte frei?”

icon_reddot_multilink (1).png Akkordeoneinträge

einzelne Akkordeoneinträge hinzufügen, sortieren oder entfernen.

Die schrittweise Erläuterung der einzelnen Schritte wird im Abschnitt Akkordeoneinträge erklärt.


Akkordeoneinträge

Akkordeoneinträge hinzufügen

Akkordeoneintrag_manuell_hinzufuegen_1.pngImage RemovedAkkordeoneintraege.pngImage Added

Mit Hilfe dieser Anleitung können einzelne Akkordeoneinträge dem Akkordeon hinzugefügt. Auf diesem Weg wird immer ein einzelner Akkordeoneintrag erstellt. Je nach gewünschter Anzahl an Einträgen, sind diese Arbeitsschritte zu wiederholen. Das Akkordeon kann so den individuellen Bedürfnissen angepasst werden.

  1. icon_reddot_multilink (1).png Auf Akkordeoneinträge bearbeiten klicken.

Info

Ist das Bearbeitungsfenster geschlossen, kann über den Punkt “Akkordeon öffnen” die Seite (Inhaltselement) “Akkordeon” zur Bearbeitung wieder geöffnet werden.

seite_erstellen_green.pngImage Removedseite_erstellen_green.pngImage Added
  1. Seite erstellen und verknüpfen

  2. Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift der neuen Seite belegt werden sollte. Diese Überschrift wird nicht auf der erstellten Seite angezeigt. Sie dient als CMS-interne Überschrift (siehe Punkt 6 unter Abschnitt “Erstellen”)

  3. Mit “OK” bestätigen

Akkordeoneintrag_manuell_hinzufuegen_2.pngImage RemovedEintrag hinzufuegen_Darstellung.pngImage Added

Darstellung des Akkordeon nach erfolgter Auswahl.

Das Bearbeiten eines Akkordeoneintrages wird im Abschnitt Akkordeoneintrag bearbeiten erklärt.

Akkordeoneintrag bearbeiten

In diesem Abschnitt wird die inhaltliche Bearbeitung eines Akkordeoneintrages, wie das Hinzufügen von Überschriften und Inhalten beschrieben.

Akkordeoneintrag_bearbeiten.pngImage RemovedEintrag bearbeiten.pngImage Added

Bezeichnung

Beschreibung

icon_reddot_openpage (1).png Akkordeon öffnen

öffnet das Inhaltselement Akkordeon zur Bearbeitung.

icon_reddot_closepage (1).png Akkordeoneintrag schließen

schließt den einzelnen Akkordeoneintrag

icon_reddot (1).png Überschrift

Erstellen der Überschrift für den Akkordeoneintrag

icon_reddot.png Text

Inhaltsbearbeitung des Akkordeoneintrages mit Hilfe des Text-Editor. Hier können die Inhalte (z.Bsp. Texte, Tabellen und/oder Grafiken) platziert werden. Das Arbeiten mit dem Text-Editor wird im Abschnitt “Text bearbeiten - Der Texteditor” beschrieben.

icon_reddot_multilink (1).png Akkordeoninhalte

Hier können innerhalb eines Akkordeoneintrages weitere Elemente hinzugefügt oder bereits hinzugefügte Elemente sortiert oder gelöscht werden. So kann ein Akkordeoneintrag mehrere, verschiedene Elemente beinhalten, wie z. Bsp. Verweislisten, Bilder (galerien) / Bildergalerien oder YouTube-Videos.

Darstellung nach Bearbeiten eines Akkordeoneintrag

Beispel_Darstellung_Ueberschrift_Inhalt.pngImage RemovedEintrag_Inhalt bearbeitet.pngImage Added

Darstellung nach Bearbeiten eines Akkordeoneintrag in der Seitenvorschau mit geöffneten Akkordeon

Beispel_Darstellung_Ueberschrift_Inhalt_Seitenvorschau.pngImage RemovedBeispel_Darstellung_Ueberschrift_Inhalt_Seitenvorschau.pngImage Added

Akkordeoneinträge sortieren

Symbol

Aktion

1icon_reddot_openpage.png

Akkordeon öffnen

Akkordeon_Eintraege_sortieren_1.pngImage RemovedEintraege sortieren 1.pngImage Added
2icon_reddot_multilink.png

Akkordeoneinträge

pattern_hinzufuegn_blau.pngImage RemovedEintraege sortieren 2.pngImage Added
3AMnu_SortOrder.gif

Seitensortierung bearbeiten

seite_erstellen_green.pngImage RemovedEintraege sortieren 3.pngImage Added
4

Akkordeoneinträge nach Bedarf sortieren. Markieren des gewünschten Akkordeoneintrages und mit Hilfe der Pfeile an der linken Seite an die gewünschte Position verschieben und mit “OK” bestätigen.

Hinweis

Das Bildschirmfoto bildet eine allgemeine Darstellung der Anzahl an Einträgen. Kann ggf. abweichen.

Akkordeon_Eintraege_sortieren_3.pngImage RemovedEintraege sortieren 4.pngImage Added
5

contentclass-snippet.gifImage Removed

Darstellung des Akkordeon mit Akkordeoneinträgen. Im Beispielbild wurden die beiden Einträge in ihrer Position getauscht. Siehe Abbildung 1 in diesem Abschnitt zum VergleichZum Vergleich, siehe Abbildung 2 in diesem Teil der Anleitung.

Hinweis

Das Bildschirmfoto bildet eine allgemeine Darstellung von Content-Klassen ab. Kann ggf. abweichen.

Akkordeon_Eintraege_sortieren_4.pngImage RemovedEintraege sortieren 5.pngImage Added

Akkordeoneinträge entfernen

Symbol

Aktion

1icon_reddot_openpage.png

Akkordeon öffnen

Akkordeon_Eintraege_sortieren_1.pngImage RemovedEintraege entfernen 1.pngImage Added
2icon_reddot_multilink.png

Akkordeoneinträge

pattern_hinzufuegn_blau.pngImage RemovedEintraege entfernen 2.pngImage Added
3AMnu_SortOrder.gif

Einträge aus liste entfernen

seite_erstellen_green.pngImage RemovedEintraege entfernen3.pngImage Added
4

Akkordeoneinträge nach Bedarf sortieren. Markieren des gewünschten Akkordeoneintrages und mit Hilfe der Pfeile an der linken Seite an die gewünschte Position verschieben und mit “OK” bestätigen.

Hinweis

Das Bildschirmfoto bildet eine allgemeine Darstellung der Anzahl an Einträgen. Kann ggf. abweichen.

Akkordeon_Eintraege_sortieren_3.pngImage RemovedEintraege entfernen 4.pngImage Added
5contentclass-snippet.gif

Darstellung des Akkordeon mit Akkordeoneinträgen. Im Beispielbild wurden die beiden Einträge in ihrer Position getauscht. Siehe Abbildung 1 in diesem Abschnitt.

Hinweis

Das Bildschirmfoto bildet eine allgemeine Darstellung von Content-Klassen ab. Kann ggf. abweichen.

Akkordeon_Eintraege_sortieren_4.png

Panel
panelIconId1f50d
panelIcon:mag:
panelIconText🔍
bgColor#E3FCEF

Häufig gestellte Fragen (FAQ)

Frage

Antwort