accordion

Typ

Block-Element

Zulässige Kind-Elemente:

• panel

Unterstütze Attribute

• name (optional): Bezeichner des Elements zur Identifizierung. Der Name muss innerhalb eines variant-Elements eindeutig sein.
  Default-Wert: -

• open (optional): Ganzzahliger Wert der angibt, welches Akkordeon-Element / panel-Element zu Beginn geöffnet sein soll. Die Nummerierung der Elemente beginnt bei 1.
  Default-Wert: none

• tags (optional): Liste von eigenen Bezeichnern, um z. B. besondere Stilvorgaben u.ä. implementieren zu können. Die Listenelemente werden durch Leerzeichen voneinander getrennt.
  Default-Wert: -

weitere Informationen zur Syntax

Beschreibung

Ein accordion-Element erzeugt innerhalb eines Containers (Box- oder View-Element) eine Akkordeon-Gruppe, mit dem Inhalte zum vertikalen Ein- und Ausklappen (Akkordeon) präsentiert werden können. Die Inhalte können hierbei in ein oder mehere einzelne Akkordeon-Elemente (panel) gegliedert werden, wobei jeweils nur ein Akkordeon-Element geöffnet bzw. ausgeklappt sein kann. Für voneinander unabhängige Akkordeon-Elemente sind mehrere accordion-Elemente notwendig.

Code-Beispiele

Code-Beispiel: Standard

<accordion>  
    <panel>  
        <title>Panel 1</title>  
        <p>Inhalt von Panel 1</p>  
    </panel>
    <panel>
        <title>Panel 2</title>
        <p>Inhalt von Panel 2</p>
    </panel>
    <panel>
        <title>Panel 3</title>
        <p>Inhalt von Panel 3</p>
    </panel>
</accordion>

Code-Beispiel: verschachtelt

<accordion>
    <panel>
        <title>Panel 1</title>
        <accordion>
            <panel>
                <title>Subpanel 1</title>
                <p>Inhalt von Subpanel 1</p>
            </panel>
        </accordion>
        <p>Inhalt von Panel 1</p>
    </panel>
    <panel>
        <title>Panel 2</title>
        <p>Inhalt von Panel 2</p>
    </panel>
</accordion>

Code-Beispiel: open

<accordion open="2">
  <panel>
    <title>Panel 1</title>
    <p>Inhalt von Panel 1</p>
  </panel>
  <panel>
    <title>Panel 2</title>
    <p>Inhalt von Panel 2</p>
  </panel>
  <panel>
    <title>Panel 3</title>
    <p>Inhalt von Panel 3</p>
  </panel>
</accordion>