> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-accordion-section.md).

# AX - Akkordeonabschnitt

## Übersicht

**AX - Akkordeon-Abschnitt** ist eine Experience-Cloud-Komponente, die einzelne aufklappbare Abschnitte innerhalb des [AX - Akkordeon](/experience-cloud/experience-cloud-de/experience-components/ax-accordion.md) Komponente auf Experience-Sites-Seiten.

Verwenden Sie es in einem Akkordeon, um Inhalte in separate aufklappbare Bereiche zu organisieren. Jeder Abschnitt dient als Container, in den Sie beliebige Experience-Cloud-Komponenten – Text, Bilder, Formulare, Listen oder benutzerdefinierte Komponenten – per Drag-and-drop ziehen können, um den Inhalt des Abschnitts zu erstellen.

Perfekt zum Strukturieren von FAQs, Schritt-für-Schritt-Anleitungen, Funktionsvergleichen oder sonstigen Akkordeon-Inhalten, die mehrere unterschiedliche Abschnitte mit verschiedenen Layouts benötigen.

{% hint style="danger" %}
Diese Komponente [nutzt Slots](/experience-cloud/experience-cloud-de/erste-schritte/learning-the-basics.md#understanding-slots) für erweiterte Anpassungen und ist damit ideal für LWR-Sites. Aura-Sites unterstützen dieses Maß an Anpassung nicht.
{% endhint %}

## Konfiguration

### Eigenschaften

**Titel** ist der Bereich, in dem Sie den Namen für den Abschnitt eingeben. Nach dem Titel gibt es einen Inhaltsbereich, in dem Sie jede andere Komponente platzieren können.

**Variante** legt den Abschnittsstil fest: `Basis` oder `schattiert`.

**Name des Öffnen-Symbols** und **Name des Schließen-Symbols** legen die Symbole fest, die angezeigt werden, wenn der Abschnitt geöffnet bzw. geschlossen ist.

**Icon-Position** platziert das Aufklappen-/Zuklappen-Symbol auf der `links` oder `rechts`. **Symbolgröße** legt seine Größe fest: `xx-klein`, `sehr klein`, `klein`, `mittel`, oder `groß`.

**Symbol ausblenden** blendet das Aufklappen-/Zuklappen-Symbol aus.

Über den Inhaltsbereich hinaus unterstützt der Header benutzerdefinierten Titelinhalt und Header-Aktionen über Slots.

<figure><img src="/files/590c2a99c524a0b082066049feaa655f79aee4b5" alt=""><figcaption></figcaption></figure>

## Styling

Passen Sie das Erscheinungsbild des Abschnitts über die **Stil** Bereich des Eigenschaftseditors an.

{% tabs %}
{% tab title="Container" %}
Gestaltet den Abschnitts-Container.

* **Außenabstand / Innenabstand:** Legen Sie den äußeren und inneren Abstand fest.
* **Hintergrundfarbe:** Legen Sie den Hintergrund des Containers fest.
* **Rahmenfarbe / -größe / -stil / -radius:** Steuern Sie den Rahmen des Containers.
  {% endtab %}

{% tab title="Kopfzeile" %}
Gestaltet den Abschnitts-Header.

* **Außenabstand / Innenabstand:** Legen Sie den äußeren und inneren Abstand fest.
* **Hintergrundfarbe:** Legen Sie den Hintergrund des Headers fest.
* **Rahmenfarbe / -größe / -stil / -radius:** Steuern Sie den Rahmen des Headers.
  {% endtab %}

{% tab title="Inhalt" %}
Gestaltet den aufklappbaren Bereich.

* **Außenabstand / Innenabstand:** Legen Sie den äußeren und inneren Abstand fest.
* **Hintergrundfarbe:** Legen Sie den Hintergrund des Inhalts fest.
* **Rahmenfarbe / -größe / -stil / -radius:** Steuern Sie den Rahmen des Inhalts.
  {% endtab %}

{% tab title="Titel" %}
Gestaltet den Titeltext des Headers.

* **Farbe:** Legen Sie die Titelfarbe fest.
* **Schriftgröße / Schriftstil / Schriftstärke:** Steuern Sie die Typografie des Titels.
  {% endtab %}

{% tab title="Symbol" %}
Gestaltet das Aufklappen-/Zuklappen-Symbol.

* **Hintergrundfarbe:** Legen Sie die Farbe hinter dem Symbol fest.
* **Vordergrundfarbe / Vordergrundfarbe bei Hover:** Legen Sie die Symbolfarbe für den Standard- und Hover-Zustand fest.
  {% endtab %}

{% tab title="Symbolrahmen" %}
Passt den Rahmen des Symbols an.

* **Farbe / Größe / Stil / Radius:** Steuern Sie das Erscheinungsbild des Symbolrahmens.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-accordion-section.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.