Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. Accordion

Accordion

Code

Markup


<div class="govuk-accordion myClass" data-module="govuk-accordion" id="default-example" data-attribute="value">
      <div class="govuk-accordion__section ">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="default-example-heading-1">
              Section A
            </span>
          </h2>
        </div>
        <div id="default-example-content-1" class="govuk-accordion__section-content" aria-labelledby="default-example-heading-1">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 1</li>
</ul>

        </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="default-example-heading-2">
              Section B
            </span>
          </h2>
        </div>
        <div id="default-example-content-2" class="govuk-accordion__section-content" aria-labelledby="default-example-heading-2">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 2</li>
</ul>

        </div>
      </div>
</div>

Macro

{% from "accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "default-example",
  "classes": "myClass",
  "attributes": {
    "data-attribute": "value"
  },
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}) }}

Accordion with additional descriptions

(open in a new window)
Code

Markup


<div class="govuk-accordion" data-module="govuk-accordion" id="with-descriptions">
      <div class="govuk-accordion__section ">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="with-descriptions-heading-1">
              Test
            </span>
          </h2>
            <div class="govuk-accordion__section-summary govuk-body" id="with-descriptions-summary-1">
              Additional description
            </div>
        </div>
        <div id="with-descriptions-content-1" class="govuk-accordion__section-content" aria-labelledby="with-descriptions-heading-1">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 1</li>
</ul>

        </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="with-descriptions-heading-2">
              Test 2
            </span>
          </h2>
            <div class="govuk-accordion__section-summary govuk-body" id="with-descriptions-summary-2">
              <span class="govuk-!-font-weight-regular">Additional description</span>
            </div>
        </div>
        <div id="with-descriptions-content-2" class="govuk-accordion__section-content" aria-labelledby="with-descriptions-heading-2">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 2</li>
</ul>

        </div>
      </div>
</div>

Macro

{% from "accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "with-descriptions",
  "items": [
    {
      "heading": {
        "text": "Test"
      },
      "summary": {
        "text": "Additional description"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Test 2"
      },
      "summary": {
        "html": "<span class=\"govuk-!-font-weight-regular\">Additional description</span>"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}) }}

Accordion with one section open

(open in a new window)
Code

Markup


<div class="govuk-accordion" data-module="govuk-accordion" id="one-section-open-example">
      <div class="govuk-accordion__section govuk-accordion__section--expanded">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="one-section-open-example-heading-1">
              Section A
            </span>
          </h2>
        </div>
        <div id="one-section-open-example-content-1" class="govuk-accordion__section-content" aria-labelledby="one-section-open-example-heading-1">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 1</li>
</ul>

        </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="one-section-open-example-heading-2">
              Section B
            </span>
          </h2>
        </div>
        <div id="one-section-open-example-content-2" class="govuk-accordion__section-content" aria-labelledby="one-section-open-example-heading-2">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 2</li>
</ul>

        </div>
      </div>
</div>

Macro

{% from "accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "one-section-open-example",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "expanded": true,
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}) }}

Accordion with all sections already open

(open in a new window)
Code

Markup


<div class="govuk-accordion" data-module="govuk-accordion" id="all-sections-open-example">
      <div class="govuk-accordion__section govuk-accordion__section--expanded">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="all-sections-open-example-heading-1">
              Section A
            </span>
          </h2>
        </div>
        <div id="all-sections-open-example-content-1" class="govuk-accordion__section-content" aria-labelledby="all-sections-open-example-heading-1">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 1</li>
</ul>

        </div>
      </div>
      <div class="govuk-accordion__section govuk-accordion__section--expanded">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="all-sections-open-example-heading-2">
              Section B
            </span>
          </h2>
        </div>
        <div id="all-sections-open-example-content-2" class="govuk-accordion__section-content" aria-labelledby="all-sections-open-example-heading-2">
          <ul class="govuk-list govuk-list--bullet">
  <li>Example item 2</li>
</ul>

        </div>
      </div>
</div>

Macro

{% from "accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "all-sections-open-example",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "expanded": true,
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "expanded": true,
      "content": {
        "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}) }}

Accordion with focusable elements inside

(open in a new window)
Code

Markup


<div class="govuk-accordion" data-module="govuk-accordion" id="with-focusable-elements">
      <div class="govuk-accordion__section ">
        <div class="govuk-accordion__section-header">
          <h2 class="govuk-accordion__section-heading">
            <span class="govuk-accordion__section-button" id="with-focusable-elements-heading-1">
              Section A
            </span>
          </h2>
        </div>
        <div id="with-focusable-elements-content-1" class="govuk-accordion__section-content" aria-labelledby="with-focusable-elements-heading-1">
          <a class="govuk-link" href="#">Link A</a>
        </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="with-focusable-elements-heading-2">
              Section B
            </span>
          </h2>
        </div>
        <div id="with-focusable-elements-content-2" class="govuk-accordion__section-content" aria-labelledby="with-focusable-elements-heading-2">
          <a class="govuk-link" href="#">Link B</a>
        </div>
      </div>
</div>

Macro

{% from "accordion/macro.njk" import govukAccordion %}

{{ govukAccordion({
  "id": "with-focusable-elements",
  "items": [
    {
      "heading": {
        "text": "Section A"
      },
      "content": {
        "html": "<a class=\"govuk-link\" href=\"#\">Link A</a>"
      }
    },
    {
      "heading": {
        "text": "Section B"
      },
      "content": {
        "html": "<a class=\"govuk-link\" href=\"#\">Link B</a>"
      }
    }
  ]
}) }}