Skip to main content

Einen Accordion auf ein Abschnittselement setzen

Wenn Sie möchten, dass ein Topic überall dort ein Accordion verwendet, wo dieses Topic erscheint, geben Sie dem Element section des Topics ein Attribut role mit dem Wert Accordion:

  1. Suchen Sie im Content Manager das Topic (oder informelles Topic) und wählen Sie es aus, um es im Editor zu öffnen.

  2. Wählen Sie im Strukturmenü des Elements ein Element section oder sidebar aus und wählen Sie anschließend Zum Element gehen.

    section-gotosection.png

    Anmerkung

    Es ist möglich, mehrere Elemente section in einem Topic zu haben. Der erste (linkste) Abschnitt stellt das gesamte Topic dar. Alle anderen Elemente section sind für Unterabschnitte innerhalb des Topics. Wir empfehlen, Unterabschnitte zu erstellen, indem Sie ein Topic als Komponente innerhalb eines anderen Topics einfügen, anstatt einen Abschnitt innerhalb eines Abschnitts zu erstellen.

  3. Wählen Sie im Panel „Elementattribute“ Attribut hinzufügen.

    select-add-attribute.png

  4. Geben Sie Rolle ein und wählen Sie sie aus dem Menü aus.

    add-role-to-section.png

  5. Geben Sie als Attributwert role Accordion ein.

    set-role-accordion.png

  6. Drücken Sie Speichern. Save icon.

  7. Wählen Sie Layout und dann das Layout für die Veröffentlichung aus. Vergewissern Sie sich, dass die Einstellung Rollenattribute als Klassennamen ausgeben aktiviert ist (Details siehe Aktivieren des Ausgaberollenattributs als Klassennamen). Accordions funktionieren nicht, wenn diese Einstellung deaktiviert ist.

Wenn Sie in HTML5 oder Zendesk publizieren, erscheint der Abschnitt oder die Seitenleiste als ein Accordion (wenn es sich um einen Unterabschnitt eines anderen Topics handelt).

Tipp

Sie können das Accordion mit benutzerdefiniertem CSS gestalten.

Wenn Sie beispielsweise eine Hintergrundfarbe für die Kopfzeile wünschen, erstellen Sie eine CSS-Datei (oder bearbeiten Sie eine vorhandene) und verwenden Sie:

.panel-default > .panel-heading { background-color: #fafafa; padding: 1em; }

Sie können das CSS dann in Ihr Layout hochladen (siehe Hochladen benutzerdefinierter CSS).