• Navigation überspringen
  • Zur Navigation
  • Zum Seitenende
Organisationsmenü öffnen Organisationsmenü schließen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
  • FAUZur zentralen FAU Website
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Suche öffnen
  • RRZE
  • Videoportal
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
Menu Menu schließen
  • Grundlagen
    • Rahmenbedingungen für Webauftritte
    • Über WordPress
      • Grundsätzliches zum Webpublishing
    • CMS-Dienstleistung
    • Konzeption einer Website
    • Login und Navigation im Backend
    • Benutzer anlegen und bearbeiten
    • Seiten
      • Eine Seite erstellen
      • Mehrere Seiten gleichzeitig konfigurieren
      • Seiten und Beiträge freigeben
    • Beiträge
    • Sidebar
    • Inhalte bearbeiten
      • Mediathek
      • Bilder
      • Galerie
      • Tabellen
      • Zitate
      • Formeln, Daten und Quellcode
    • Seitenstruktur erstellen
    • Menüs
    • Widgetbereiche und Widgets
    • Häufig gestellte Fragen
    Portal Grundlagen
  • Block-Editor
    • Was ist der Block-Editor?
    • Hauptelemente des Editors
      • Die obere Editorleiste
      • Das Inserter Fenster
      • Der Inhaltsbereich
      • Das Einstellungsfenster
    • Der Block
      • Block-Typen
      • Die Block-Werkzeugleiste
      • Einen Block hinzufügen
      • Die Listenansicht
    • Block-Funktionen
      • Text und Bild verlinken
      • Blöcke gruppieren
      • Anker-Links (Sprungmarken)
      • Block-Vorlagen erstellen
      • Bild in Tabellenblock einfügen
    • Umstellung auf den Block-Editor
    • FAQ Block-Editor
    Portal Der Block-Editor
  • Plugins
    • Plugins aktivieren
    • Portale
      • Mein Studium
      • Jobs
      • Lehrveranstaltungen (Lectures)
      • CRIS
    • Inhaltliche Erweiterung
      • RRZE FAUdir (Kontakte)
      • RRZE Bluesky
      • Elements Blocks
      • Elements (Gestaltung)
      • Multilang (mehrsprachige Seiten)
      • FAQ
      • Video
      • FAU oEmbed
      • Typesettings (Code Highlighter)
      • Glossary
      • Person (Kontakte)
      • Advanced Editor Tools
    • Funktionale Erweiterung
      • Downloads
      • Post-Expiration (Verfallsdatum Beiträge)
      • Calendar
      • Expo
      • RSVP (Buchungssystem)
      • WS Form (Formulare erstellen)
      • Contact Form 7
      • RRZE Events
    • SEO & Marketing
      • Autoshare
      • RSS Feed
      • RRZE Newsletter
      • The SEO Framework
      • QR-Code Generator
      • Statistik
      • Siteimprove
    • Benutzer- und Zugriffsverwaltung
      • Workflow (Rollen & Module verwalten)
      • Access Control
      • Private Site
    • Sicherheit & Datenschutz
      • Legal (Rechtl. Pflichttexte)
    • Spezialplugins
      • Remoter
      • Progressive Web-App (PWA)
      • Synonym
    Portal Plugins
  • Themes
    • FAU Einrichtungen
      • Umsetzungsbeispiele
      • Templates
      • Portalmenüs
      • Bildlinks (Logos einbinden)
      • Shortcodes
    • Francesca – Ein Theme für Kooperationen
    Portal Themes
  • Tutorials
    • Schnelleinstieg FAU Events
    • Publikationsliste erstellen
    • Tipps und Tricks
    • Neue Daten in die FAU-Karte einbinden
    • Vortragsliste erstellen
    • Schnelleinstieg FAU Einrichtungen
      • Vorbereitungen
      • Navigation im Backend
      • Ein Theme auswählen
      • Seitenlogo und Seiteninformationen ergänzen
      • Eine Startseite erstellen
      • Rechtstexte generieren
      • Inhaltsseiten erstellen für Anfänger
      • Beiträge erstellen
      • Dynamische Sidebar
      • Abmessungen für Bilder und Grafiken
      • Portalseiten und -menüs
      • Seitennavigation
      • Suchmaschinenoptimierung in 5 Minuten
      • Slider und Blogroll
    • Barrierefreiheit
      • Vorwort und Überblick
      • Einführung und Hintergründe
      • Bereitstellung und Pflege von Inhalten
      • Entwicklung und Design
      • Organisatorische und rechtliche Anforderungen
      • Satzungen
      • Tests der Barrierefreiheit
      • Weitere Leitfäden und relevante Informationsangebote
      • Kurzanleitung zur Verbesserung der digitalen Barrierefreiheit in Dokumenten aus Büroanwendungen
    • SEO – Search engine optimization
      • SEO Inhalte gestalten
      • SEO Grundlagen
      • SEO und Barrierefreiheit
    • Pflege MeinStudium-Portal
    Portal Tutorials
  • Entwicklung
    • Vorgaben für das Design
      • Farben (Markendesign 2021)
      • Logos
      • Schriften
    • Einsatzkontext (Statistik)
      • Einrichtungsbezeichnungen
    • Versionsverwaltung Git
    • Einheitliche Vergabe von Versionsnummern
    • Vorgaben an Themes
    • Vorgaben an Plugins
    • Eigene Testinstanz
    • Serverkonfiguration
    • Statistiken zu Webauftritten
    Portal Entwicklung
  1. Startseite
  2. Plugins
  3. Inhaltliche Erweiterung
  4. Elements
  5. Accordion

Accordion

Bereichsnavigation: Plugins
  • Plugins aktivieren
  • Portale
  • Inhaltliche Erweiterung
    • RRZE FAUdir (Kontakte)
    • RRZE Bluesky
    • Elements Blocks
    • Elements
      • Accordion
        • Accordions verschachteln
        • Accordion Sprungmarken
        • Accordion - Häufige Probleme und Fragen
        • Accordion-Beispiel
      • Alerts / Hinweisboxen
      • Assistant
      • Buttons
      • Call To Action (CTA)
      • Content-Index
      • Content-Slider / Text-Slider
      • Divider - Der unsichtbare Trenner
      • Einschub
      • Filterfunktion für Tabellen
      • Galerie
      • Hidden Text
      • Icon-Listen
      • Icons
      • LaTeX
      • Legal-text
      • Limit width
      • Mehrspaltige Fließtexte
      • Mehrspaltiger Inhalt
      • News - Beiträge ausgeben
      • Notices / Absatzklassen
      • Tabs - Registerkarten
      • Timeline
    • Multilang
    • FAQ
    • Video
    • FAU oEmbed
    • RRZE Typesettings
    • Glossary
    • Person
    • Advanced Editor Tools
  • Funktionale Erweiterung
  • SEO & Marketing
  • Benutzer- und Zugriffsverwaltung
  • Sicherheit & Datenschutz
  • Spezialplugins

Accordion

Information in Ausklappmenüs verpacken

Beratung und Support

Webteam

Webteam

  • E-Mail: webmaster@fau.de
Beschreibung: Für alle Fragen rund um WordPress, Webhosting & Co.

GitHub

  • Repository
  • Fehler melden
Elements ist auf allen CMS-Instanzen vorinstalliert und bereits aktiviert. Sie können alle Elements-Shortcodes ohne vorangegangene Aktivierung benutzen.
Elements Accordions Übersicht
Elements Accordions Übersicht

Standard-Accordions



Wenn Sie viel Information auf kleinem Raum anbieten möchten, können Sie statt der üblichen Absätze mit Überschriften auch ein Accordion verwenden. So werden nur die Überschriften angezeigt, die eigentliche Information erhält man auf Klick. Als Beispiel wählen wir hier einen Speiseplan:

Shortcode

Elements-Accordion-Shortcode
Elements-Accordion-Shortcode

Alle Anführungszeichen müssen im Backend für den Shortcode oben stehen. Bitte achten Sie darauf, dass die Anführungszeichen oben stehen, falls Sie einen Shortcode mit deutschen Anführungszeichen kopieren und in Ihrem eigenen Backend einfügen.

Shortcode

Ein einfaches Accordion können Sie folgendermaßen erzeugen:

[collapsibles]
[collapse title="Name" color=""]
[/collapse]
[/collapsibles]

Der Shortcode collapse hat die Attribute title=““ und color=““. Das Attribut title=““ dient dazu, die Überschrift im Accordionbalken zu erzeugen – in unserem Beispiel ist das für den Menüplan am Montag also title=“Montag“.

Mögliche Attribute

Parameter Erklärung Beispiel eines gefüllten Parameters
title = „“ Erzeugt die Überschrift im Accordionbalken title = „Meine Überschrift“
load= „“ Das Akkordionfach ist beim Laden der Seite geöffnet load = „open“
color = „“ Färbt den Accordionbalken in eine der folgenden Fakultätsfarben:

phil
med
nat
rw
tf
Wird das Attribut leer gelassen, ist es die Standard-FAU Farbe

color = „philfak“
expand-all-link=““ Erzeugt einen Button um alle Akkordionfächer auf einmal zu öffnen expand-all-link=“true“
hstart=““ Bestimmt die Überschriften-Hierarchie-Ebene. Standardwert: 2. hstart=“2″
name=““ Setzt einen Namen für die Sprungmarke fest. Nähere Informationen finden Sie in der Anleitung über Sprungmarken in Akkordeons. name=“sprungmarke“

Akkordeons durch Icons und Suffix erweitern


Alle verfügbaren Icons können unter Fontawesome v.6 nachgeschlagen werden. Das Iconset wird dabei vor dem Icon-Namen angegeben. z.B.: icon=“solid pencil“



[collapsibles]
[collapse icon="solid user-secret" title="Name" color="med" suffix="Text"]
[/collapse]
[/collapsibles]

Inhalt des Akkordeonfachs

Beispiele

Accordions mit „Open-All“ Button

Gericht 1
Gericht 2
Gericht 3

Gericht 4
Gericht 5
Gericht 6

Gericht 7
Gericht 8
Gericht 9

Gericht 10
Gericht 11
Gericht 12

Gericht 13
Gericht 14
Gericht 15

Gericht 16
Gericht 17
Gericht 18

Genutzer Code im Beispiel:

[collapsibles expand-all-link="true"]

[collapse title="Montag" color="" name="Montag"]
Gericht 1
Gericht 2
Gericht 3
[/collapse]

[collapse title="Dienstag" color="" name="Dienstag"]
Gericht 4
Gericht 5
Gericht 6
[/collapse]

[collapse title="Mittwoch" color="" name="Mittwoch"]
Gericht 7
Gericht 8
Gericht 9
[/collapse]

[collapse title="Donnerstag" color="" name="Donnerstag"]
Gericht 10
Gericht 11
Gericht 12
[/collapse]

[collapse title="Freitag" color="" name="Freitag"]
Gericht 13
Gericht 14
Gericht 15
[/collapse]

[collapse title="Samstag" color="" name="Samstag"]
Gericht 16
Gericht 17
Gericht 18
[/collapse]

[/collapsibles]

Accordionfarben

Füllen Sie das Farb-Attribut mit color = „phil“ für die dargestellte Farbe.

Füllen Sie das Farb-Attribut mit color = „med“ für die dargestellte Farbe.

Füllen Sie das Farb-Attribut mit color = „nat“ für die dargestellte Farbe.

Füllen Sie das Farb-Attribut mit color = „rw“ für die dargestellte Farbe.

Füllen Sie das Farb-Attribut mit color = „tf“ für die dargestellte Farbe.

Füllen Sie das Farb-Attribut mit color = „fau“ für die dargestellte Farbe.

Code


[collapsibles]

[collapse title="Farbe phil" color="phil" name="colsprungmarke1"]
[/collapse]

[collapse title="Farbe med" color="med" name="colsprungmarke2"]
[/collapse]

[collapse title="Farbe nat" color="nat" name="colsprungmarke3"]
[/collapse]

[collapse title="Farbe rw" color="rw" name="colsprungmarke4"]
[/collapse]

[collapse title="Farbe tf" color="tf" name="colsprungmarke5"]
[/collapse]

[collapse title="Farbe Fau" color="fau" name="colsprungmarke6"]
[/collapse]

[/collapsibles]

Helles Accordion

Und hier ein wenig Text.

Und hier ein wenig Text.

Code


[collapsibles style="light"]

[collapse title="Ein helles Accordion" color="" name="hell"]
Und hier ein wenig Text.
[/collapse]

[collapse title="Ein helles Accordion mit Farbe" color="tf" name="hell_farbe"]
Und hier ein wenig Text.
[/collapse]

[/collapsibles]

Weitere Hinweise zum Webauftritt

Noch Fragen?

Schreiben Sie uns eine E-Mail an webmaster@fau.de.
Wir beantworten Ihnen alle offenen Fragen rund um unser Content Management System (CMS), WordPress, Webhosting und Co.

Regionales Rechenzentrum Erlangen
(RRZE)

Martensstraße 1
91058 Erlangen
  • Kontakt
  • Webworking Blog
  • Impressum
  • Datenschutz
  • Barrierefreiheit
  • RSS Feed
  • GitHub
  • Twitter
Nach oben