Accordion

Default

Svelte code

<script>
	import { Accordion } from '@danboscaro/govuk-svelte'
</script>

<Accordion {...{
  id: "default-example",
  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"
      }
    }
  ]
}} />

With additional descriptions

Svelte code

<script>
	import { Accordion } from '@danboscaro/govuk-svelte'
</script>

<Accordion {...{
  id: "with-descriptions",
  items: [
    {
      heading: {
        text: "Test"
      },
      summary: {
        text: "Additional description"
      },
      content: {
        html: "<p class=\"govuk-body\">\n  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.\n</p>\n<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 (wrapped in span)</span>"
      },
      content: {
        html: "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
      }
    }
  ]
}} />

With long content and description

Svelte code

<script>
	import { Accordion } from '@danboscaro/govuk-svelte'
</script>

<Accordion {...{
  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: {
        html: "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
      }
    },
    {
      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"
      }
    }
  ]
}} />

With one section open

Svelte code

<script>
	import { Accordion } from '@danboscaro/govuk-svelte'
</script>

<Accordion {...{
  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"
      }
    }
  ]
}} />

With all sections already open

Svelte code

<script>
	import { Accordion } from '@danboscaro/govuk-svelte'
</script>

<Accordion {...{
  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"
      }
    }
  ]
}} />

With focusable elements inside

Svelte code

<script>
	import { Accordion } from '@danboscaro/govuk-svelte'
</script>

<Accordion {...{
  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>"
      }
    }
  ]
}} />

With translations

Svelte code

<script>
	import { Accordion } from '@danboscaro/govuk-svelte'
</script>

<Accordion {...{
  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"
      }
    }
  ]
}} />