Accordion - Akordeón
Zdrojový kód
HTML
<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">
Názov
</span>
</h2>
</div>
<div id="with-descriptions-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">
Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou.
</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="with-descriptions-heading-2">
Názov
</span>
</h2>
<div class="govuk-accordion__section-summary govuk-body" id="with-descriptions-summary-2">
Popis
</div>
</div>
<div id="with-descriptions-content-2" class="govuk-accordion__section-content">
<p class="govuk-body">
Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou.
</p>
</div>
</div>
</div>
Makro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "with-descriptions",
items: [
{
heading: {
text: "Názov"
},
content: {
text: "Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou."
}
},
{
heading: {
text: "Názov"
},
summary: {
text: "Popis"
},
content: {
text: "Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou."
}
}
]
}) }}Akordeón predvolený malý
Zdrojový kód
HTML
<div class="govuk-accordion" data-module="govuk-accordion" id="default-example">
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header small ">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="default-example-heading-1">
Názov A
</span>
</h2>
</div>
<div id="default-example-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">
Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou.
</p>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header small ">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="default-example-heading-2">
Názov B
</span>
</h2>
</div>
<div id="default-example-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Ukážka odrážky</li>
</ul>
</div>
</div>
</div>
Makro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "default-example",
smallAccordion: true,
items: [
{
heading: {
text: "Názov A"
},
content: {
text: "Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou."
}
},
{
heading: {
text: "Názov B"
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Ukážka odrážky</li>\n" +
"</ul>\n"
}
}
]
}) }}Akordeón s dlhým obsahom a popisom
Otvoriť ukážku na novej záložke : akordeón s dlhým obsahom a popisom
Zdrojový kód
HTML
<div class="govuk-accordion" data-module="govuk-accordion" id="with-long-content-and-description">
<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-long-content-and-description-heading-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.
</span>
</h2>
<div class="govuk-accordion__section-summary govuk-body" id="with-long-content-and-description-summary-1">
Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.
</div>
</div>
<div id="with-long-content-and-description-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">
Lorem ipsum dolor sit amet consectetur adipiscing, elit odio eget at class est, ridiculus arcu suspendisse scelerisque blandit. Donec porttitor taciti interdum litora magna leo, ac primis vestibulum montes habitasse nostra, dictum in torquent nunc congue. Lorem ipsum dolor sit amet consectetur adipiscing, elit odio eget at class est, ridiculus arcu suspendisse scelerisque blandit. Donec porttitor taciti interdum litora magna leo, ac primis vestibulum montes habitasse nostra, dictum in torquent nunc congue.
</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="with-long-content-and-description-heading-2">
Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.
</span>
</h2>
<div class="govuk-accordion__section-summary govuk-body" id="with-long-content-and-description-summary-2">
<span class="govuk-!-font-weight-regular">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>
</div>
</div>
<div id="with-long-content-and-description-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Ukážka odrážky</li>
</ul>
</div>
</div>
</div>
Makro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "with-long-content-and-description",
items: [
{
heading: {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor."
},
summary: {
text: "Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem."
},
content: {
text: "Lorem ipsum dolor sit amet consectetur adipiscing, elit odio eget at class est, ridiculus arcu suspendisse scelerisque blandit. Donec porttitor taciti interdum litora magna leo, ac primis vestibulum montes habitasse nostra, dictum in torquent nunc congue. Lorem ipsum dolor sit amet consectetur adipiscing, elit odio eget at class est, ridiculus arcu suspendisse scelerisque blandit. Donec porttitor taciti interdum litora magna leo, ac primis vestibulum montes habitasse nostra, dictum in torquent nunc congue."
}
},
{
heading: {
text: "Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum."
},
summary: {
html: '<span class="govuk-!-font-weight-regular">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>'
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Ukážka odrážky</li>\n" +
"</ul>\n"
}
}
]
}) }}Akordeón s jednou otvorenou sekciou
Otvoriť ukážku na novej záložke : akordeón s jednou otvorenou sekciou
Zdrojový kód
HTML
<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">
Sekcia A
</span>
</h2>
</div>
<div id="one-section-open-example-content-1" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>ukážka odrážky 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">
Sekcia B
</span>
</h2>
</div>
<div id="one-section-open-example-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>ukážka odrážky 2</li>
</ul>
</div>
</div>
</div>
Makro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "one-section-open-example",
items: [
{
heading: {
text: "Sekcia A"
},
expanded: true,
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>ukážka odrážky 1</li>\n" +
"</ul>\n"
}
},
{
heading: {
text: "Sekcia B"
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>ukážka odrážky 2</li>\n" +
"</ul>\n"
}
}
]
}) }}Akordeón s otorenými všetkými sekciamo
Otvoriť ukážku na novej záložke : akordeón s otorenými všetkými sekciamo
Zdrojový kód
HTML
<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">
Sekcia A
</span>
</h2>
</div>
<div id="all-sections-open-example-content-1" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>ukážka odrážky 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">
Sekcia B
</span>
</h2>
</div>
<div id="all-sections-open-example-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>ukážka odrážky 2</li>
</ul>
</div>
</div>
</div>
Makro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "all-sections-open-example",
items: [
{
heading: {
text: "Sekcia A"
},
expanded: true,
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>ukážka odrážky 1</li>\n" +
"</ul>\n"
}
},
{
heading: {
text: "Sekcia B"
},
expanded: true,
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>ukážka odrážky 2</li>\n" +
"</ul>\n"
}
}
]
}) }}Akordeón s linkami v obsahu
Otvoriť ukážku na novej záložke : akordeón s linkami v obsahu
Zdrojový kód
HTML
<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">
Sekcia A
</span>
</h2>
</div>
<div id="with-focusable-elements-content-1" class="govuk-accordion__section-content">
<a class="govuk-link" href="#">Linka 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">
Sekcia B
</span>
</h2>
</div>
<div id="with-focusable-elements-content-2" class="govuk-accordion__section-content">
<a class="govuk-link" href="#">Linka B</a>
</div>
</div>
</div>
Makro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "with-focusable-elements",
items: [
{
heading: {
text: "Sekcia A"
},
content: {
html: '<a class="govuk-link" href="#">Linka A</a>'
}
},
{
heading: {
text: "Sekcia B"
},
content: {
html: '<a class="govuk-link" href="#">Linka B</a>'
}
}
]
}) }}Akordeón s vlastnými popiskami tlačidiel
Otvoriť ukážku na novej záložke : akordeón s vlastnými popiskami tlačidiel
Zdrojový kód
HTML
<div class="govuk-accordion" data-module="govuk-accordion" id="with-translations" data-i18n.hide-all-sections="Skryť všetky sekcie" data-i18n.hide-section-aria-label="Skryť túto sekciu" data-i18n.show-all-sections="Odkryť všetky sekcie" data-i18n.show-section-aria-label="Odkryť túto sekciu">
<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-translations-heading-1">
Sekcia A
</span>
</h2>
</div>
<div id="with-translations-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">
Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou.
</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="with-translations-heading-2">
Sekcia B
</span>
</h2>
</div>
<div id="with-translations-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>ukážka odrážky 1</li>
</ul>
</div>
</div>
</div>
Makro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "with-translations",
hideAllSectionsText: "Skryť všetky sekcie",
showAllSectionsText: "Odkryť všetky sekcie",
hideSectionAriaLabelText: "Skryť túto sekciu",
showSectionAriaLabelText: "Odkryť túto sekciu",
items: [
{
heading: {
text: "Sekcia A"
},
content: {
text: "Potrebujeme poznať vašu štátnu príslušnosť, aby sme mohli zistiť, v ktorých voľbách máte právo voliť. Ak nemôžete uviesť svoju štátnu príslušnosť, budete musieť poslať kópie dokladov totožnosti poštou."
}
},
{
heading: {
text: "Sekcia B"
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>ukážka odrážky 1</li>\n" +
"</ul>\n"
}
}
]
}) }}