Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

Akkordeon

Mittels Akkordeon können Inhalte auf einer Seite ein- und ausgeklappt werden. Ein Akkordeon muss mindestens 2 Elemente enthalten. Bei nur einem Aufklapp-Element muss das Pattern Details verwendet werden.

Achtung, SEO-relevant: Eingeklappte Inhalte werden von Google als weniger relevant eingestuft.

 Varianten

Akkordeon alle Elemente geschlossen

 Vorschau

Einzelförderung

Gesamtförderung

Kunstankauf

Arbeitsstipendium

Start-Atelier

 Code 
<wm-accordion>
  <wm-accordion-heading>
    <h3>Einzelförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 30. April: für Vorhaben mit Beginn zwischen Juli und Dezember des laufenden Jahres</li>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien:
          <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Gesamtförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien:
          <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Kunstankauf</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 31. Jänner</li>
        <li>Richtlinien:
          <a href="#">Kunstankauf - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Ankauf von Kunstwerken - Förderantrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Arbeitsstipendium</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 30. Juni</li>
        <li>Richtlinien:
          <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Förderantrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Start-Atelier</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: Derzeit sind keine Einreichungen möglich.</li>
        <li>Richtlinien:
          <a href="#">Bewerbung um ein START-Atelier - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Bewerbung um ein START-Atelier - Förderantrag</a>
        </li>
        <li>Abrechnung: Keine Abrechnung erforderlich</li>
      </ul>
    </wm-list>
  </wm-accordion-content>
</wm-accordion>

Akkordeon alle Elemente geöffnet

 Vorschau

Einzelförderung

Gesamtförderung

Kunstankauf

Arbeitsstipendium

Start-Atelier

 Code 
<wm-accordion expanded="expanded">
  <wm-accordion-heading>
    <h3>Einzelförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 30. April: für Vorhaben mit Beginn zwischen Juli und Dezember des laufenden Jahres</li>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien:
          <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Gesamtförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien:
          <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Kunstankauf</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 31. Jänner</li>
        <li>Richtlinien:
          <a href="#">Kunstankauf - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Ankauf von Kunstwerken - Förderantrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Arbeitsstipendium</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 30. Juni</li>
        <li>Richtlinien:
          <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Förderantrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Start-Atelier</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: Derzeit sind keine Einreichungen möglich.</li>
        <li>Richtlinien:
          <a href="#">Bewerbung um ein START-Atelier - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Bewerbung um ein START-Atelier - Förderantrag</a>
        </li>
        <li>Abrechnung: Keine Abrechnung erforderlich</li>
      </ul>
    </wm-list>
  </wm-accordion-content>
</wm-accordion>

Akkordeon mit einzelnem Element geöffnet

 Vorschau

Einzelförderung

Gesamtförderung

Kunstankauf

Arbeitsstipendium

Start-Atelier

 Code 
<wm-accordion open="2">
  <wm-accordion-heading>
    <h3>Einzelförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 30. April: für Vorhaben mit Beginn zwischen Juli und Dezember des laufenden Jahres</li>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien:
          <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Gesamtförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien:
          <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Kunstankauf</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 31. Jänner</li>
        <li>Richtlinien:
          <a href="#">Kunstankauf - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Ankauf von Kunstwerken - Förderantrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Arbeitsstipendium</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 30. Juni</li>
        <li>Richtlinien:
          <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Förderantrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Start-Atelier</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: Derzeit sind keine Einreichungen möglich.</li>
        <li>Richtlinien:
          <a href="#">Bewerbung um ein START-Atelier - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Bewerbung um ein START-Atelier - Förderantrag</a>
        </li>
        <li>Abrechnung: Keine Abrechnung erforderlich</li>
      </ul>
    </wm-list>
  </wm-accordion-content>
</wm-accordion>

Akkordeon alle Elemente geschlossen mit Icons

Icons müssen in allen Elementen wm-accordion-heading eingebunden werden.

Vorschau

Einzelförderung

Gesamtförderung

Kunstankauf

Arbeitsstipendium

Start-Atelier

 Code 
<wm-accordion>
  <wm-accordion-heading>
    <wm-icon slot="icon" iconid="info"></wm-icon>
    <h3>Einzelförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 30. April: für Vorhaben mit Beginn zwischen Juli und Dezember des laufenden Jahres</li>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien:
          <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <wm-icon slot="icon" iconid="info"></wm-icon>
    <h3>Gesamtförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien:
          <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <wm-icon slot="icon" iconid="info"></wm-icon>
    <h3>Kunstankauf</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 31. Jänner</li>
        <li>Richtlinien:
          <a href="#">Kunstankauf - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Ankauf von Kunstwerken - Förderantrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <wm-icon slot="icon" iconid="info"></wm-icon>
    <h3>Arbeitsstipendium</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 30. Juni</li>
        <li>Richtlinien:
          <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Förderantrag</a>
        </li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <wm-icon slot="icon" iconid="info"></wm-icon>
    <h3>Start-Atelier</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: Derzeit sind keine Einreichungen möglich.</li>
        <li>Richtlinien:
          <a href="#">Bewerbung um ein START-Atelier - Richtlinien</a>
        </li>
        <li>Antrag:
          <a href="#">Bewerbung um ein START-Atelier - Förderantrag</a>
        </li>
        <li>Abrechnung: Keine Abrechnung erforderlich</li>
      </ul>
    </wm-list>
  </wm-accordion-content>
</wm-accordion>

Akkordeon mit Zusatztext und Tabelle

 Vorschau

Parkpickerl

12.08.2024 - 11.08.2025
16.11.2024 Termin vereinbart
10.08.2024 Parkpickerl wird zur Plattform hinzugefügt

Parkpickerl

12.08.2023 - 11.08.2024
16.11.2023 Termin vereinbart
10.08.2023 Parkpickerl wird zur Plattform hinzugefügt
Code 
<wm-accordion open="2">
  <wm-accordion-heading>
    <h3>Parkpickerl</h3>
    <span slot="subheading">12.08.2024 - 11.08.2025</span>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-table>
      <table>
        <tbody>
          <tr>
            <td>
              16.11.2024
            </td>
            <td>
              Termin vereinbart
            </td>
          </tr>
          <tr>
            <td>
              10.08.2024
            </td>
            <td>
              Parkpickerl wird zur Plattform hinzugefügt
            </td>
          </tr>
        </tbody>
      </table>
    </wm-table>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Parkpickerl</h3>
    <span slot="subheading">12.08.2023 - 11.08.2024</span>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-table>
      <table>
        <tbody>
          <tr>
            <td>
              16.11.2023
            </td>
            <td>
              Termin vereinbart
            </td>
          </tr>
          <tr>
            <td>
              10.08.2023
            </td>
            <td>
              Parkpickerl wird zur Plattform hinzugefügt
            </td>
          </tr>
        </tbody>
      </table>
    </wm-table>
  </wm-accordion-content>
</wm-accordion>
Dev

Interaktive Demo
Vorschau

Einzelförderung

Gesamtförderung

Kunstankauf

Arbeitsstipendium

Start-Atelier

 Code 
<wm-accordion data-demo-pattern="wm-accordion-preview">
  <wm-accordion-heading>
    <h3>Einzelförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 30. April: für Vorhaben mit Beginn zwischen Juli und Dezember des laufenden Jahres</li>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien: <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a></li>
        <li>Antrag: <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Gesamtförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien: <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a></li>
        <li>Antrag: <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Kunstankauf</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 31. Jänner</li>
        <li>Richtlinien: <a href="#">Kunstankauf - Richtlinien</a></li>
        <li>Antrag: <a href="#">Ankauf von Kunstwerken - Förderantrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Arbeitsstipendium</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 30. Juni</li>
        <li>Richtlinien: <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Richtlinien</a></li>
        <li>Antrag: <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Förderantrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Start-Atelier</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: Derzeit sind keine Einreichungen möglich.</li>
        <li>Richtlinien: <a href="#">Bewerbung um ein START-Atelier - Richtlinien</a></li>
        <li>Antrag: <a href="#">Bewerbung um ein START-Atelier - Förderantrag</a></li>
        <li>Abrechnung: Keine Abrechnung erforderlich</li>
      </ul>
    </wm-list>
  </wm-accordion-content>
</wm-accordion>

Weitere Farben

Wichtige Informationen zur Verwendung weiterer Farben finden Sie im Bereich Development - Individuelle Anpassungen.

Um Ihre eigenen Farben im White-Label-Theme zu definieren, fügen Sie einfach CSS-Regeln nach dem folgenden Muster hinzu: 

wm-accordion[color="meinefarben"] { 
  --accordion-background-color: #174342;
  --accordion-background-color--hover: #346866;
  --accordion-panel-background-color: rgb(25, 61, 61);
  --accordion-panel-font-color: white;
  --accordion-font-color: yellow;
  --accordion-font-color--hover: #fff;
}
<wm-accordion color="meinefarben">
  <wm-accordion-heading>
    <h3>Überschrift 1</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Überschrift 2</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
  </wm-accordion-content>
</wm-accordion>

Überschrift 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.

Überschrift 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.

Weitere Beispiele

Akkordeon mit Events

 Vorschau

Einzelförderung

Gesamtförderung

Kunstankauf

Arbeitsstipendium

Start-Atelier
Code 
<wm-accordion class="events">
  <wm-accordion-heading>
    <h3>Einzelförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 30. April: für Vorhaben mit Beginn zwischen Juli und Dezember des laufenden Jahres</li>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien: <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a></li>
        <li>Antrag: <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Gesamtförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien: <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a></li>
        <li>Antrag: <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Kunstankauf</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 31. Jänner</li>
        <li>Richtlinien: <a href="#">Kunstankauf - Richtlinien</a></li>
        <li>Antrag: <a href="#">Ankauf von Kunstwerken - Förderantrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Arbeitsstipendium</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 30. Juni</li>
        <li>Richtlinien: <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Richtlinien</a></li>
        <li>Antrag: <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Förderantrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Start-Atelier</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: Derzeit sind keine Einreichungen möglich.</li>
        <li>Richtlinien: <a href="#">Bewerbung um ein START-Atelier - Richtlinien</a></li>
        <li>Antrag: <a href="#">Bewerbung um ein START-Atelier - Förderantrag</a></li>
        <li>Abrechnung: Keine Abrechnung erforderlich</li>
      </ul>
    </wm-list>
  </wm-accordion-content>
</wm-accordion>

<div class="events-output" role="status"></div>

<script>
  const events = document.querySelector(".events");
  const output = document.querySelector(".events-output");

  events.addEventListener("wm-collapsed", (e) => {
    output.innerText = `Event: ${e.type} ID: ${e.detail.id} Index: ${e.detail.index}`;
  });

  events.addEventListener("wm-expanded", (e) => {
    output.innerText = `Event: ${e.type} ID: ${e.detail.id} Index: ${e.detail.index}`;
  });
</script>

Akkordeon mit Methode: Button öffnet/schließt bestimmtes Element

 Vorschau

Einzelförderung

Gesamtförderung

Kunstankauf

Arbeitsstipendium

Start-Atelier

 Code 
<button type="button" class="methods-expand">
  2. öffnen
</button>
<button type="button" class="methods-collapse">
  2. schließen
</button>

<wm-accordion class="methods">
  <wm-accordion-heading>
    <h3>Einzelförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 30. April: für Vorhaben mit Beginn zwischen Juli und Dezember des laufenden Jahres</li>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien: <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a></li>
        <li>Antrag: <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Gesamtförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien: <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a></li>
        <li>Antrag: <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Kunstankauf</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 31. Jänner</li>
        <li>Richtlinien: <a href="#">Kunstankauf - Richtlinien</a></li>
        <li>Antrag: <a href="#">Ankauf von Kunstwerken - Förderantrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Arbeitsstipendium</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 30. Juni</li>
        <li>Richtlinien: <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Richtlinien</a></li>
        <li>Antrag: <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Förderantrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Start-Atelier</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: Derzeit sind keine Einreichungen möglich.</li>
        <li>Richtlinien: <a href="#">Bewerbung um ein START-Atelier - Richtlinien</a></li>
        <li>Antrag: <a href="#">Bewerbung um ein START-Atelier - Förderantrag</a></li>
        <li>Abrechnung: Keine Abrechnung erforderlich</li>
      </ul>
    </wm-list>
  </wm-accordion-content>
</wm-accordion>

<script>
  const methods = document.querySelector(".methods");
  const expand = document.querySelector(".methods-expand");
  const collapse = document.querySelector(".methods-collapse");

  expand.addEventListener("click", (e) => {
  methods.expand(2);
  });

  collapse.addEventListener("click", (e) => {
  methods.collapse(2);
  });
</script>

Akkordeon mit Methode: Button öffnet/schließt alle Elemente

 Vorschau

Einzelförderung

Gesamtförderung

Kunstankauf

Arbeitsstipendium

Start-Atelier

 Code 
<wm-button kind="secondary" class="showall">
  <button aria-pressed="false">
    Alle öffnen/schließen
  </button>
</wm-button>

<wm-accordion class="showall-accordion">
  <wm-accordion-heading>
    <h3>Einzelförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 30. April: für Vorhaben mit Beginn zwischen Juli und Dezember des laufenden Jahres</li>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien: <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a></li>
        <li>Antrag: <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Gesamtförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien: <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a></li>
        <li>Antrag: <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Kunstankauf</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 31. Jänner</li>
        <li>Richtlinien: <a href="#">Kunstankauf - Richtlinien</a></li>
        <li>Antrag: <a href="#">Ankauf von Kunstwerken - Förderantrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Arbeitsstipendium</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 30. Juni</li>
        <li>Richtlinien: <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Richtlinien</a></li>
        <li>Antrag: <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Förderantrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <h3>Start-Atelier</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: Derzeit sind keine Einreichungen möglich.</li>
        <li>Richtlinien: <a href="#">Bewerbung um ein START-Atelier - Richtlinien</a></li>
        <li>Antrag: <a href="#">Bewerbung um ein START-Atelier - Förderantrag</a></li>
        <li>Abrechnung: Keine Abrechnung erforderlich</li>
      </ul>
    </wm-list>
  </wm-accordion-content>
</wm-accordion>

<script>
  const toggle = document.querySelector(".showall");
  toggle.addEventListener("click", (e) => {
    const button = e.target.closest("button");
    const accordion = document.querySelector(".showall-accordion");
    const isOpen = button.getAttribute("aria-expanded") !== "false";

    button.setAttribute("aria-expanded", !isOpen);

    if (isOpen) {
      accordion.setAttribute("expanded", "expanded");
    } else {
      accordion.removeAttribute("expanded");
    }
  });
</script>

Akkordeon alle Elemente geschlossen mit Icons

Icons müssen in allen Elementen wm-accordion-heading eingebunden werden.

Vorschau

Einzelförderung

Gesamtförderung

Kunstankauf

Arbeitsstipendium

Start-Atelier

 Code 
<wm-accordion>
  <wm-accordion-heading>
    <wm-icon slot="icon" iconid="info"></wm-icon>
    <h3>Einzelförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 30. April: für Vorhaben mit Beginn zwischen Juli und Dezember des laufenden Jahres</li>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien: <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a></li>
        <li>Antrag: <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <wm-icon slot="icon" iconid="info"></wm-icon>
    <h3>Gesamtförderung</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine:
          <ul>
            <li>1. bis 31. Oktober: für Vorhaben im Folgejahr</li>
          </ul>
        </li>
        <li>Richtlinien: <a href="#">Bildende Kunst und Medienkunst - Förderrichtlinien</a></li>
        <li>Antrag: <a href="#">Einzel- und Gesamtförderung im Bereich Bildende Kunst und Medienkunst - Antrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <wm-icon slot="icon" iconid="info"></wm-icon>
    <h3>Kunstankauf</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 31. Jänner</li>
        <li>Richtlinien: <a href="#">Kunstankauf - Richtlinien</a></li>
        <li>Antrag: <a href="#">Ankauf von Kunstwerken - Förderantrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <wm-icon slot="icon" iconid="info"></wm-icon>
    <h3>Arbeitsstipendium</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: 1. bis 30. Juni</li>
        <li>Richtlinien: <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Richtlinien</a></li>
        <li>Antrag: <a href="#">Arbeitsstipendium Bildende Kunst und Medienkunst - Förderantrag</a></li>
      </ul>
    </wm-list>
  </wm-accordion-content>
  <wm-accordion-heading>
    <wm-icon slot="icon" iconid="info"></wm-icon>
    <h3>Start-Atelier</h3>
  </wm-accordion-heading>
  <wm-accordion-content>
    <wm-list gap="xxs">
      <ul>
        <li>Einreichtermine: Derzeit sind keine Einreichungen möglich.</li>
        <li>Richtlinien: <a href="#">Bewerbung um ein START-Atelier - Richtlinien</a></li>
        <li>Antrag: <a href="#">Bewerbung um ein START-Atelier - Förderantrag</a></li>
        <li>Abrechnung: Keine Abrechnung erforderlich</li>
      </ul>
    </wm-list>
  </wm-accordion-content>
</wm-accordion>
API

Abhängigkeiten

HTML 
<script src="https://assets.wien.gv.at/theme/latest/js/components/Accordion/Accordion.js" type="module"></script>
 JavaScript 
import { Accordion } from './wienermelange/assets/js/components/Accordion/Accordion.js';

Eigenschaften

Eigenschaften
Eigenschaft Beschreibung Werte Default
open Nummer des zu öffnenden Panels angeben, beginnend bei eins (1). Es kann nur ein Wert übergeben werden. Number leer
single Attribut angeben, damit immer nur ein Panel gleichzeitig geöffnet wird (übertrumpft expanded). Boolean false
expanded Alle geöffnet anzeigen. Boolean false

Slots

Name Beschreibung
default Nimmt Paare von wm-accordion-heading und wm-accordion-content Elementen auf

Methoden

Eigenschaft Optionen Argumente
_expandContent Akkordeon wurde geöffnet
_collapseContent Akkordeon wurde geschlossen
expand Panel öffnen index (number)
collapse Panel schließen index (number)

Events

Event Beschreibung Rückgabewert
wm-defined Web Component ist bereit

CSS API

Property Beschreibung
--accordion-background-color Hintergrundfarbe des Buttons
--accordion-background-color--hover Hintergrundfarbe des Buttons Hover & Focus
--accordion-panel-background-color Hintergrundfarbe des Panels
--accordion-panel-font-color Schriftfarbe im Panel
--accordion-border Rahmen um den Button
--accordion-font-color Schriftfarbe des Buttons
--accordion-font-color--hover Schriftfarbe des Buttons Hover & Focus
--accordion-contrast Kontrast-Hintergrundfarbe, zum Beispiel für Multimedia-Elemente
--accordion-font-weight Schriftstärke im Button
--accordion-padding-inline Innenabstand links und rechts
--accordion-padding-block-start Innenabstand oben
--accordion-padding-block-end Innenabstand unten
--accordion-gap Abstand zwischen Panels

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at