Akkordion
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.
<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
FAQ Ipsum
FAQ Dolor
FAQ Sit
<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>