Skip to content

Akkordion

Akkordions bieten eine effektive Möglichkeit, große Mengen an Informationen zu strukturieren und werden auf der WKO Website vor allem für FAQs verwendet, da sie eine platzsparende und benutzerfreundliche Darstellung ermöglichen.

Effiziente Informationsstruktur mit dem Akkordion

Das Akkordion ist durch die strukturierte Anordnung von Themen, die entweder als Fragen formuliert oder als Überschriften dargestellt sind, organisiert. Jeder Abschnitt des Akkordions kann individuell durch einen Textlink oder das Pfeil-Icon ausgeklappt oder eingeklappt werden. Für eine verbesserte Benutzerfreundlichkeit besteht die Option, das gesamte Akkordion mit nur einem Klick über den Link „Alle ausklappen/Alle einklappen“ zu erweitern oder zu reduzieren. Das Akkordion ist auf eine inhaltliche Ebene beschränkt und weist keine weiteren Verschachtelungen auf. Wenn ein Abschnitt des Akkordions geöffnet ist, wird der Inhalt auf dem Hintergrund in der jeweiligen Farbe des zugehörigen Themenbereichs angezeigt.

Texthierarchie

Das Akkordion beginnt optional mit einer Überschrift, darunter folgen die einzelnen aufklappbaren Punkte des Akkordions.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit
<div class="accordion-group">
<button class="btn btn-link">
<span>alle aufklappen</span
><svg class="icon icon-arrow-down">
<use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-down"></use>
</svg>
</button>
<div class="accordion">
<div class="accordion-item">
<h4 class="accordion-header" id="AkkordionIDHeadingLorem">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#AkkordionIDCollapseLorem"
aria-expanded="false"
aria-controls="AkkordionIDCollapseLorem"
>
Lorem
</button>
</h4>
<div
id="AkkordionIDCollapseLorem"
class="accordion-collapse collapse bg--lavender-secondary-30"
aria-labelledby="AkkordionIDHeadingLorem"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="AkkordionIDHeadingIpsum">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#AkkordionIDCollapseIpsum"
aria-expanded="false"
aria-controls="AkkordionIDCollapseIpsum"
>
Ipsum
</button>
</h4>
<div
id="AkkordionIDCollapseIpsum"
class="accordion-collapse collapse bg--lavender-secondary-30"
aria-labelledby="AkkordionIDHeadingIpsum"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="AkkordionIDHeadingDolor">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#AkkordionIDCollapseDolor"
aria-expanded="false"
aria-controls="AkkordionIDCollapseDolor"
>
Dolor
</button>
</h4>
<div
id="AkkordionIDCollapseDolor"
class="accordion-collapse collapse bg--lavender-secondary-30"
aria-labelledby="AkkordionIDHeadingDolor"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
</div>
</div>
</div>
</div>
</div>

Intelligente Funktionen für ein noch benutzerfreundlicheres FAQ-Akkordion: Von Textsuche bis zur Sharebar – Optimale Interaktivität und Übersichtlichkeit.

Im FAQ-Akkordion gibt es erweiterte Features wie Textsuche und Filteroptionen, die die Nutzererfahrung verbessern sollen. Die automatische Generierung von Button-Tags durch JavaScript, basierend auf den Titeln einzelner Gruppen, optimiert die Bedienbarkeit. Bei drei oder mehr Gruppen werden die Tags zunächst in minimaler Ansicht angezeigt und lassen sich bei Bedarf durch Klick auf weitere Punkte vollständig entfalten. Zudem ermöglicht die Sharebar das unkomplizierte Teilen des Inhalts eines jeden Akkordions.

FAQ Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

FAQ Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

FAQ Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

FAQ Sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit
<div class="faqs">
<div class="form-floating faqs-form">
<input
type="text"
class="form-control"
id="searchfaqs"
placeholder="durchsuchen ..."
/><label for="floatingInput">durchsuchen ...</label>
</div>
<div class="faqs-tags"></div>
<div class="faqs-group accordion-group warm-grey-secondary-30">
<h3>FAQ Lorem</h3>
<button class="btn btn-link">
<span>alle aufklappen</span
><svg class="icon icon-arrow-down">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-down"
></use>
</svg>
</button>
<div class="accordion faqs-accordion" data-gtm-box="FAQ">
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingLorem">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseLorem"
aria-expanded="false"
aria-controls="FaqIDCollapseLorem"
>
Lorem
</button>
</h4>
<div
id="FaqIDCollapseLorem"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingLorem"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingIpsum">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseIpsum"
aria-expanded="false"
aria-controls="FaqIDCollapseIpsum"
>
Ipsum
</button>
</h4>
<div
id="FaqIDCollapseIpsum"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingIpsum"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingDolor">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseDolor"
aria-expanded="false"
aria-controls="FaqIDCollapseDolor"
>
Dolor
</button>
</h4>
<div
id="FaqIDCollapseDolor"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingDolor"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="faqs-group accordion-group warm-grey-secondary-30">
<h3>FAQ Ipsum</h3>
<button class="btn btn-link">
<span>alle aufklappen</span
><svg class="icon icon-arrow-down">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-down"
></use>
</svg>
</button>
<div class="accordion faqs-accordion" data-gtm-box="FAQ">
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingLorem">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseLorem"
aria-expanded="false"
aria-controls="FaqIDCollapseLorem"
>
Lorem
</button>
</h4>
<div
id="FaqIDCollapseLorem"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingLorem"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingIpsum">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseIpsum"
aria-expanded="false"
aria-controls="FaqIDCollapseIpsum"
>
Ipsum
</button>
</h4>
<div
id="FaqIDCollapseIpsum"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingIpsum"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingDolor">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseDolor"
aria-expanded="false"
aria-controls="FaqIDCollapseDolor"
>
Dolor
</button>
</h4>
<div
id="FaqIDCollapseDolor"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingDolor"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="faqs-group accordion-group warm-grey-secondary-30">
<h3>FAQ Dolor</h3>
<button class="btn btn-link">
<span>alle aufklappen</span
><svg class="icon icon-arrow-down">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-down"
></use>
</svg>
</button>
<div class="accordion faqs-accordion" data-gtm-box="FAQ">
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingLorem">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseLorem"
aria-expanded="false"
aria-controls="FaqIDCollapseLorem"
>
Lorem
</button>
</h4>
<div
id="FaqIDCollapseLorem"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingLorem"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingIpsum">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseIpsum"
aria-expanded="false"
aria-controls="FaqIDCollapseIpsum"
>
Ipsum
</button>
</h4>
<div
id="FaqIDCollapseIpsum"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingIpsum"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingDolor">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseDolor"
aria-expanded="false"
aria-controls="FaqIDCollapseDolor"
>
Dolor
</button>
</h4>
<div
id="FaqIDCollapseDolor"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingDolor"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="faqs-group accordion-group warm-grey-secondary-30">
<h3>FAQ Sit</h3>
<button class="btn btn-link">
<span>alle aufklappen</span
><svg class="icon icon-arrow-down">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-down"
></use>
</svg>
</button>
<div class="accordion faqs-accordion" data-gtm-box="FAQ">
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingLorem">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseLorem"
aria-expanded="false"
aria-controls="FaqIDCollapseLorem"
>
Lorem
</button>
</h4>
<div
id="FaqIDCollapseLorem"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingLorem"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingIpsum">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseIpsum"
aria-expanded="false"
aria-controls="FaqIDCollapseIpsum"
>
Ipsum
</button>
</h4>
<div
id="FaqIDCollapseIpsum"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingIpsum"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="FaqIDHeadingDolor">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#FaqIDCollapseDolor"
aria-expanded="false"
aria-controls="FaqIDCollapseDolor"
>
Dolor
</button>
</h4>
<div
id="FaqIDCollapseDolor"
class="accordion-collapse collapse bg--warm-grey-secondary-30"
aria-labelledby="FaqIDHeadingDolor"
>
<div class="accordion-body">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing
elit
<div class="social-media-share">
<button aria-expanded="false">
<span class="visually-hidden">Inhalt teilen</span>
<svg class="icon icon-share">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
></use>
</svg>
</button>
<ul class="m-0 p-0">
<li>
<a
href="#"
id="copylink"
title="Link kopieren"
aria-label="Link kopieren"
>
<svg class="icon icon-link">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
></use>
</svg>
</a>
</li>
<li>
<a
href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
title="Als E-Mail versenden"
aria-label="Als E-Mail versenden"
>
<svg class="icon icon-email">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url="
data-social="linkedin"
title="Auf LinkedIn teilen"
aria-label="Auf LinkedIn teilen"
>
<svg class="icon icon-linkedin">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.xing.com/spi/shares/new?url="
data-social="xing"
title="Auf Xing teilen"
aria-label="Auf Xing teilen"
>
<svg class="icon icon-xing">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.facebook.com/sharer/sharer.php?u="
data-social="facebook"
title="Auf Facebook teilen"
aria-label="AUf Facebook teilen"
>
<svg class="icon icon-facebook">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
></use>
</svg>
</a>
</li>
<li>
<a
href="https://www.twitter.com/share?text="
data-social="twitter"
title="Auf X teilen"
aria-label="Auf X teilen"
>
<svg class="icon icon-twitter">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
></use>
</svg>
</a>
</li>
<li>
<a
href="#"
onclick="window.print();return false;"
title="Drucken"
aria-label="Drucken"
>
<svg class="icon icon-print">
<use
xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>