Unterabschnitte

5 min read

Akkordeons (einklappbare Abschnitte)

Akkordeons sind Abschnitte mit Inhalten, die für HTML5- oder Zendesk-Ausgaben aus- oder eingeklappt werden können. Sie erweisen sich nützlich, wenn Sie sehr viele Unterabschnitte haben, die den Überblick über das Topic erschweren könnten. Der Leser kann damit nacheinander jeden Abschnitt ein- oder ausblenden.

Akkordeons können auf sidebar-Elementen und section-Elementen verwendet werden. Bei Abschnitten erscheint das Akkordeon allerdings nur, wenn das betreffende Topic als Unterabschnitt in ein anderes Topic eingefügt wird, siehe Komponente einfügen.

Akkordeons erstellen

Paligo unterstützt Accordions (einklappbare Abschnitte) für die HTML5- und Zendesk-Ausgabe. In anderen Ausgabeformaten wird der Inhalt als normaler Text angezeigt. Sie können Accordions für Topics (Abschnittselemente) und informelle Topics (Seitenleisten-Elemente) erstellen.

Es gibt zwei Möglichkeiten, ein Accordion zu erzeugen. Wählen Sie den Weg, der Ihrem Ziel entspricht:

Wenn Sie ein Accordion erstellt haben, testen Sie mit der Vorschau, ob es funktioniert (siehe Testen Sie Ihre Accordions).

Einen Accordion auf ein Abschnittselement setzen
Anmerkung

Da Sie ein Topic möglicherweise als Haupt-Topic verwenden möchten (ohne das Accordion), wird davon abgeraten, Accordions auf einem oberen Ebenen-Abschnitt einzurichten.

Anmerkung

Wenn Accordions auf Abschnitte der oberen Ebenen angewendet werden, werden sie nicht in der Seitennavigation der Ausgabe (HTML5) angezeigt, wenn sie zur Publikationsstruktur hinzugefügt werden. Stattdessen erscheinen sie als Accordion-Abschnitt im übergeordneten Topic.

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.

    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 Attribut hinzufügen im Panel „Elementattribute“.

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

  5. Geben Sie als Attributwert role Accordion ein.

  6. Drücken Sie Speichern.

  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).

Ein Accordion auf einen importierten Unterabschnitt setzen

Wenn Sie Unterabschnitte erstellen, indem Sie ein Topic in ein anderes Topic einfügen, können Sie die Unterabschnitte als Accordion anzeigen. Hierfür gibt es zwei Möglichkeiten:

  • Legen Sie fest, dass das Unterabschnitt-Topic in seinem Element section role:accordion hat. Dadurch wird das Topic überall dort, wo es verwendet wird, als Accordion dargestellt (siehe Einen Accordion auf ein Abschnittselement setzen).

  • Setzen Sie das Container-Topic auf xlink:role = accordion auf dem Element xi:include.

    Dadurch wird das Unterabschnitt-Topic als Accordion angezeigt, aber nur, wenn es als Unterabschnitt in diesem bestimmten übergeordneten Topic verwendet wird. Wenn das Unterabschnitt-Topic auch an anderen Stellen verwendet wird, wird es an diesen anderen Stellen nicht als Accordion angezeigt (es sei denn, Sie haben es auch an diesen Stellen als Accordion eingerichtet).

So bearbeiten Sie den Quellcode für das „übergeordnete“ Topic und machen einen importierten Unterabschnitt als Accordion:

  1. Suchen Sie im Content Manager das „übergeordnete“ Topic, das den Unterabschnitt („untergeordnetes“ Topic) enthält. Wählen Sie das übergeordnete Topic aus, um es im Editor zu öffnen.

  2. Klicken Sie auf den Unterabschnitt (untergeordnetes Topic) und schauen Sie dann oben im Strukturmenü des Elements nach. Stellen Sie sicher, dass der Unterabschnitt durch ein Element import in der Struktur des Topics repräsentiert wird.

    Ein Topic, das ein anderes Topic als Unterabschnitt enthält. Das Unterabschnitt-Topic wurde als Komponente eingefügt und wird durch ein Import-Element referenziert.

    Wenn Sie kein Element import sehen, ist es wahrscheinlich, dass der Unterabschnitt auf andere Weise erstellt wurde. Beispielsweise als Element section innerhalb des „übergeordneten“ Topics hinzugefügt. Sie können es in eine eingefügte Komponente umwandeln, indem Sie sein Element section auswählen und dann In wiederverwendbare Komponente umwandeln wählen. Paligo wandelt section in ein separates Topic um und fügt stattdessen ein Element import hinzu.

  3. Wählen Sie das Element import im Menü Elementstruktur aus und wählen dann Zum Element gehen aus.

  4. Suchen Sie im Quellcode-Editor den Verweis auf das Unterabschnitt-Topic (untergeordnet). Es wird als Element xi:include dargestellt und enthält ein Element xi:fallback mit einem Element para darin, etwa so:

    Anmerkung

    Wenn Ihr „übergeordnetes“ Topic viele importierte Unterabschnitte enthält, hat es ein Element xi:include für jeden einzelnen. Sie werden in der Reihenfolge angezeigt, in der sie im „übergeordneten“ Topic erscheinen. Stellen Sie sicher, dass Sie sich das xi:include für den Unterabschnitt ansehen, den Sie bearbeiten möchten.

  5. Fügen Sie xlink:role="accordion" zum Element xi:include hinzu. Es sollte nach dem Attribut und Wert href stehen. Beispiel:

  6. Drücken Sie Speichern.

Wenn Sie Ihren Inhalt veröffentlichen oder als HTML5-Vorschau anzeigen, wird der Unterabschnitt als Accordion angezeigt. Wenn Sie das Unterabschnitt-Topic an anderer Stelle verwenden, wird es nicht als Accordion angezeigt*.

Testen Sie Ihre Accordions

Wenn Sie ein neues Accordion einrichten, sollten Sie vor der Veröffentlichung testen, ob es wie erwartet funktioniert. Möglicherweise stellen Sie fest, dass Sie einen Fehler gemacht haben und das Accordion nicht funktioniert oder dass Sie Informationen in das Accordion aufgenommen haben, die an anderer Stelle stehen müssen.

So testen Sie ein Accordion:

  1. Wählen Sie im Content Manager das „übergeordnete“ Topic aus, das das Unterabschnitt-Topic mit dem Accordion enthält. Paligo öffnet das Topic im Editor.

  2. Wählen Sie Vorschau und dann HTML5 aus.

    Paligo öffnet eine Vorschau in einer neuen Registerkarte.

  3. Wählen Sie HTML5 aus.

  4. Wenn Sie das Accordion korrekt eingerichtet haben, wird das Unterabschnitt-Topic als Accordion angezeigt. Sie sehen nur den Titel und daneben ein Pfeilsymbol.

    Wenn Sie den Titel des Unterabschnitt-Topics oder das Pfeilsymbol auswählen, sollte sich das Accordion erweitern und den Inhalt des Topics anzeigen.

    Wenn das Accordion nicht wie erwartet funktioniert, überprüfen Sie, ob Sie das Accordion korrekt eingerichtet haben (siehe Einen Accordion auf ein Abschnittselement setzen oder Ein Accordion auf einen importierten Unterabschnitt setzen). Achten Sie auf Tippfehler in den Attributwerten role und stellen Sie sicher, dass Sie die Rolle auf das richtige Element angewendet haben.

Alle Akkordeons erweitern

Wenn Sie möchten, dass alle Akkordeons sich erweitern, sobald eine Seite im HTML5-Helpcenter geladen wird, fügen Sie Ihrem benutzerdefinierten JavaScript folgenden Code hinzu:

// Expand accordions
$(document).ready(function () {
    $('.accordion .collapse').collapse('show');
    $('.accordion .panel-heading').addClass('active');
 
    // Uncomment below if you're using AJAX
    /* $(document).ajaxComplete(function() {
            $('.accordion .collapse').collapse('show');
            $('.accordion .panel-heading').addClass('active');
    }); */
});
Anmerkung

Dieses Skript gilt für Akkordeons auf jeder Seite und funktioniert ausschließlich für HTML5-Helpcenter-Ausgaben.