Accordion Component

Page Design Example

Reisen mit AIDA

opens in a new tab

Design Component

Figma - AOS

opens in a new tab

Example

Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1

Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2

Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3

Properties
Markup
JSON


    

    
        headingElement:
        div
    

    
        singleExpansion:
        false
    

    
        sling:resourceType:
        aida-component-library/core/components/container/accordion

    <div class="accordion panelcontainer">
  <div id="accordion-db9caf20bf" class="cmp-accordion" data-placeholder-text="false" data-initialized="">
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-db9caf20bf-item-a754374dda&quot;:{&quot;@type&quot;:&quot;aida-component-library/core/components/container/accordion/item&quot;,&quot;dc:title&quot;:&quot;Ist eine Covid-Erkrankung mitversichert?&quot;}}" id="accordion-db9caf20bf-item-a754374dda">
      <div class="cmp-accordion__header">
        <button id="accordion-db9caf20bf-item-a754374dda-button" class="cmp-accordion__button" type="button" aria-controls="accordion-db9caf20bf-item-a754374dda-panel" data-cmp-hook-accordion="button">
          <span class="cmp-accordion__title">Ist eine Covid-Erkrankung mitversichert?</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </div>
      <div data-cmp-hook-accordion="panel" id="accordion-db9caf20bf-item-a754374dda-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-db9caf20bf-item-a754374dda-button" style="max-height: 0px;" aria-hidden="true">
        <div class="text">
          <div id="text-a754374dda" class="cmp-text">
            <p>Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;Text 1&nbsp;</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-db9caf20bf-item-2768c2c13d&quot;:{&quot;@type&quot;:&quot;aida-component-library/core/components/container/accordion/item&quot;,&quot;dc:title&quot;:&quot;Was mache ich im Schadensfall?&quot;}}" id="accordion-db9caf20bf-item-2768c2c13d">
      <div class="cmp-accordion__header">
        <button id="accordion-db9caf20bf-item-2768c2c13d-button" class="cmp-accordion__button" type="button" aria-controls="accordion-db9caf20bf-item-2768c2c13d-panel" data-cmp-hook-accordion="button">
          <span class="cmp-accordion__title">Was mache ich im Schadensfall?</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </div>
      <div data-cmp-hook-accordion="panel" id="accordion-db9caf20bf-item-2768c2c13d-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-db9caf20bf-item-2768c2c13d-button" style="max-height: 0px;" aria-hidden="true">
        <div class="text">
          <div id="text-2768c2c13d" class="cmp-text">
            <p>Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;Text 2&nbsp;</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" data-cmp-data-layer="{&quot;accordion-db9caf20bf-item-8bb54d213c&quot;:{&quot;@type&quot;:&quot;aida-component-library/core/components/container/accordion/item&quot;,&quot;dc:title&quot;:&quot;Wie hoch sind die Versicherungssummen?&quot;}}" id="accordion-db9caf20bf-item-8bb54d213c">
      <div class="cmp-accordion__header">
        <button id="accordion-db9caf20bf-item-8bb54d213c-button" class="cmp-accordion__button" type="button" aria-controls="accordion-db9caf20bf-item-8bb54d213c-panel" data-cmp-hook-accordion="button">
          <span class="cmp-accordion__title">Wie hoch sind die Versicherungssummen?</span>
          <span class="cmp-accordion__icon"></span>
        </button>
      </div>
      <div data-cmp-hook-accordion="panel" id="accordion-db9caf20bf-item-8bb54d213c-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="accordion-db9caf20bf-item-8bb54d213c-button" style="max-height: 0px;" aria-hidden="true">
        <div class="text">
          <div id="text-8bb54d213c" class="cmp-text">
            <p>Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;Text 3&nbsp;</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

myAIDA

Careers

Page Authoring

Navigation

Containers

Utilities

Accordion Component

Page Design Example

Design Component

Example