Webové komponenty

Akordeón

Vďaka akordeónu si používateľ môže zobraziť alebo skryť jednotlivé sekcie súvisiaceho obsahu na stránke.

Obsah:

Kedy použiť akordeón

Akordeón používajte vtedy, ak s istotou viete, že je pre používateľov prospešné:

• zobraziť prehľad sekcií súvisiaceho obsahu,
• skryť prehľad sekcií súvisiaceho obsahu.

Akordeón je vhodný najmä pre používateľov, ktorí potrebujú vykonávať podobné úlohy z jedného miesta.

Akordeóny je ideálne použiť pre jednoduchý obsah a odkazy.

Kedy akordeón nepoužívať

Akordeón nepoužívajte pre obsah, ktorý je potrebný a nevyhnutný pre všetkých požívateľov. Akordeóny prioritne slúžia na skrytie alebo zobrazenie špecifického obsahu. Nie každý si ich všimne alebo pochopí, ako fungujú.

Najskôr preto vyskúšajte svoj obsah bez akordeónu. Zvážte, či nie je lepšie:

• zjednodušiť a zmenšiť množstvo obsahu,
• rozdeliť obsah na viac stránok,
• uchovávať obsah na jednej stránke oddelenej hlavičkami,
• použiť zoznam odkazov a umožniť používateľom rýchlo prejsť na konkrétne časti obsahu.

Akordeón nepoužívajte, ak by jeho obsah mohol spomaliť načítanie stránky.

Akordeóny nepoužívajte na rozdelenie série otázok do sekcií. Namiesto toho použite samostatné stránky.

Akordeón so zhrnutím obsahu

Sekcia 1

Toto je zhrnutie obsahu 1.

Obsah prvej sekcie.

Sekcia 2

Toto je zhrnutie obsahu 2.

Obsah druhej sekcie.

Sekcia 3

Toto je zhrnutie obsahu 3.

Obsah tretej sekcie.

                    
<div class="govuk-accordion" data-module="idsk-accordion" id="1"  data-attribute="value">
<div class="govuk-accordion__controls">
  <button class="govuk-accordion__open-all" data-open-title="Otvoriť všetky"
  data-close-title="Zatvoriť všetky" type="button" aria-expanded="false">
     <span class="govuk-visually-hidden govuk-accordion__controls-span" data-section-title="sekcie"></span></button>
</div>
      <div class="govuk-accordion__section ">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="1-heading-1">
              Sekcia 1
            </span>
          </h2>
            <div class="govuk-accordion__section-summary govuk-body" id="1-summary-1">
              Toto je zhrnutie obsahu 1.
            </div>
        </div>
        <div id="1-content-1" class="govuk-accordion__section-content" aria-labelledby="1-heading-1">
          <p class='govuk-body'>Obsah prvej sekcie.</p>
        </div>
      </div>
      <div class="govuk-accordion__section ">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="1-heading-2">
              Sekcia 2
            </span>
          </h2>
            <div class="govuk-accordion__section-summary govuk-body" id="1-summary-2">
              Toto je zhrnutie obsahu 2.
            </div>
        </div>
        <div id="1-content-2" class="govuk-accordion__section-content" aria-labelledby="1-heading-2">
          <p class='govuk-body'>Obsah druhej sekcie.</p>
        </div>
      </div>
      <div class="govuk-accordion__section ">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="1-heading-3">
              Sekcia 3
            </span>
          </h2>
            <div class="govuk-accordion__section-summary govuk-body" id="1-summary-3">
              Toto je zhrnutie obsahu 3.
            </div>
        </div>
        <div id="1-content-3" class="govuk-accordion__section-content" aria-labelledby="1-heading-3">
          <p class='govuk-body'>Obsah tretej sekcie.</p>
        </div>
      </div>
</div>

Akordeón bez zhrnutia obsahu

Sekcia 1

Obsah prvej sekcie.

Sekcia 2

Obsah druhej sekcie.

Sekcia 3

Obsah tretej sekcie.

                    
<div class="govuk-accordion" data-module="idsk-accordion" id="2"  data-attribute="value">
<div class="govuk-accordion__controls">
  <button class="govuk-accordion__open-all" data-open-title="Otvoriť všetky"
  data-close-title="Zatvoriť všetky" type="button" aria-expanded="false">
     <span class="govuk-visually-hidden govuk-accordion__controls-span" data-section-title="sekcie"></span></button>
</div>
      <div class="govuk-accordion__section ">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="2-heading-1">
              Sekcia 1
            </span>
          </h2>
        </div>
        <div id="2-content-1" class="govuk-accordion__section-content" aria-labelledby="2-heading-1">
          <p class='govuk-body'>Obsah prvej sekcie.</p>
        </div>
      </div>
      <div class="govuk-accordion__section ">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="2-heading-2">
              Sekcia 2
            </span>
          </h2>
        </div>
        <div id="2-content-2" class="govuk-accordion__section-content" aria-labelledby="2-heading-2">
          <p class='govuk-body'>Obsah druhej sekcie.</p>
        </div>
      </div>
      <div class="govuk-accordion__section ">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="2-heading-3">
              Sekcia 3
            </span>
          </h2>
        </div>
        <div id="2-content-3" class="govuk-accordion__section-content" aria-labelledby="2-heading-3">
          <p class='govuk-body'>Obsah tretej sekcie.</p>
        </div>
      </div>
</div>