Hauptinhalt

Akkordeon

letzte Aktualisierung der Seite: Version 2.21.1

Bei der Akkordeon-Komponente handelt es sich um HTML-Markup, über den Inhalt versteckt und bei Bedarf eingeblendet werden kann. Zur Nutzung der Akkordeon-Komponente ist das unten definierte Markup zu verwenden. Innerhalb eines Aufklappelements kann beliebiger HTML-Code platziert werden. Ebenfalls können hier andere Komponenten eingebunden werden, bspw. ein Bild oder ein Link. Informationen zur Gestaltung eines Akkordeons sind zu finden unter: Akkordeon

HTML-Einbindung

Quellcode

<div class="panel-group"
     id="accordion-content-1"
     role="tablist"
     aria-multiselectable="true"
     data-no-persistence>
    <!--                                     -->
    <!-- Definition eines Akkordeon-Elements -->
    <!--                                     -->
    <div class="panel panel-default">
        <div class="panel-heading"
             role="tab"
             id="heading-content-1-1">
            <h4 class="panel-title">
                <a class="collapsed"
                   data-toggle="collapse"
                   href="#collapse-content-1-1"
                   aria-expanded="false"
                   aria-controls="collapse-content-1-1">
                    Überschrift des Elements
                </a>
            </h4>
        </div>
        <div id="collapse-content-1-1"
             class="panel-collapse collapse"
             role="tabpanel"
             aria-labelledby="heading-content-1-1">
            <span class="accordion-head">Innere Überschrift nach Aufklappen</span>
            <!--                                                        -->
            <!-- Textueller Inhalt, HTML-Inhalt oder andere Komponenten -->
            <!--                                                        -->
        </div>
    </div>
    <!--                                      -->
    <!-- Beliebige weitere Akkordeon-Elemente -->
    <!--                                      -->
</div>

Erläuterung

  • Ab Zeile 1 wird der Rahmen für das Akkordeon definiert.
  • Auf Zeile 5 wird optional das Speichern des Zustands in der URL deaktiviert
  • Ab Zeile 8 folgt die Definition eines einzelnen Akkordeon-Elements. Um mehrere Elemente zu definieren, muss dieses Fragment dupliziert werden.
  • In Zeile 15 wird innerhalb des href-Attributs der DIV-Knoten angegeben, der den Inhalt des aktuellen Elements beherbergt. Der Link-Text stellt die Überschrift dar, die auf dem Akkordeon-Element angezeigt wird.
  • Mit Zeile 22 wird der Inhalt des Elements beschrieben. Die ID des DIV-Knotens muss dem zuvor genannten href-Attribut entsprechen.
  • Auf Zeile 26 ist ein Überschriften-Element definiert, das nach Aufklappen des Akkordeon-Elements sichtbar wird. Nachfolgend wird der Inhalt des Akkordeon-Elements in HTML beschrieben. Hier können ebenfalls weitere Komponenten definiert werden.

Weitere Informationen

Statische URL

Mit dem Öffnen von Akkordeon-Elementen wird die URL im Browser manipuliert. Es wir ein Parameter Namens _cp angefügt. Als Wert bekommt der Parameter ein JSON-Objekt angefügt. Dieses JSON-Objekt beinhaltet zum einen alle geöffneten Elemente, zum anderen das zuletzt aktivierte Element. Wird die URL mit dem angefügten Parameter neu geladen, so werden alle Elemente, die in der Liste der geöffneten Elemente sind, wieder geöffnet. Das zuletzt aktivierte Element rückt in den Fokus, indem der Browser direkt zu dem Element scrollt. Nachfolgend ist beispielhaft der Inhalt des _cp-Attributes dargestellt:

 

{
    // Die ID der Gruppe für welches sich die offenen Elements gemerkt werden
    "accordion-content-1" : {
        // Das erste Element (0) und das zweite Element (1) sollen geöffnet dargestellt werden
        "0" : true,
        "1" : true
    },
    // Informationen zu zum zuletzt geöffneten Element, zu dem gesprungen werden soll
    "previousOpen" : {
        // ID der Gruppe in der das Element zuletzt aktiviert wurde
        "group" : "accordion-content-1",
        // ID des Elements, das zuletzt geöffnet wurde
        "idx" : 0
    }
}
zurück zum Seitenanfang