Accordion - Akordeón
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">
Názov
</span>
</h2>
</div>
<div id="with-descriptions-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
</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">
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
</p>
</div>
</div>
</div>
Macro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "with-descriptions",
items: [
{
heading: {
text: "Názov"
},
content: {
text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
}
},
{
heading: {
text: "Názov"
},
summary: {
text: "Popis"
},
content: {
text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
}
}
]
}) }}Akordeón default small
Code
Markup
<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">
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
</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>Example item 2</li>
</ul>
</div>
</div>
</div>
Macro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "default-example",
smallAccordion: true,
items: [
{
heading: {
text: "Názov A"
},
content: {
text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
}
},
{
heading: {
text: "Názov B"
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 2</li>\n" +
"</ul>\n"
}
}
]
}) }}Akordeón with long content and description
Otvoriť príklad na novej záložke: akordeón with long content and description
Code
Markup
<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>Example item 2</li>
</ul>
</div>
</div>
</div>
Macro
{% 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>Example item 2</li>\n" +
"</ul>\n"
}
}
]
}) }}Akordeón with one section open
Otvoriť príklad na novej záložke: akordeón with one section open
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">
<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">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 2</li>
</ul>
</div>
</div>
</div>
Macro
{% from "govuk/components/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"
}
}
]
}) }}Akordeón with all sections already open
Otvoriť príklad na novej záložke: akordeón with all sections already open
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">
<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">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 2</li>
</ul>
</div>
</div>
</div>
Macro
{% from "govuk/components/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"
}
}
]
}) }}Akordeón with focusable elements inside
Otvoriť príklad na novej záložke: akordeón with focusable elements inside
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">
<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">
<a class="govuk-link" href="#">Link B</a>
</div>
</div>
</div>
Macro
{% from "govuk/components/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>'
}
}
]
}) }}Akordeón with translations
Otvoriť príklad na novej záložke: akordeón with translations
Code
Markup
<div class="govuk-accordion" data-module="govuk-accordion" id="with-translations" data-i18n.hide-all-sections="Collapse all sections" data-i18n.hide-section="Collapse" data-i18n.hide-section-aria-label="Collapse this section" data-i18n.show-all-sections="Expand all sections" data-i18n.show-section="Expand" data-i18n.show-section-aria-label="Expand this section">
<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">
Section A
</span>
</h2>
</div>
<div id="with-translations-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
</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">
Section B
</span>
</h2>
</div>
<div id="with-translations-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 2</li>
</ul>
</div>
</div>
</div>
Macro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "with-translations",
hideAllSectionsText: "Collapse all sections",
showAllSectionsText: "Expand all sections",
hideSectionText: "Collapse",
hideSectionAriaLabelText: "Collapse this section",
showSectionText: "Expand",
showSectionAriaLabelText: "Expand this section",
items: [
{
heading: {
text: "Section A"
},
content: {
text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
}
},
{
heading: {
text: "Section B"
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 2</li>\n" +
"</ul>\n"
}
}
]
}) }}