Accordion (experimental) example

With the anchor link navigation

Some apps require custom ids per accordion section heading. Custom ids allow you to link section headings, sometimes across multiple pages.

For example on guidance pages for Content Designers, referred to as “manuals”, each manual includes multiple sets of accordions and will reference between specific sections to easily access content.

Using the same rules, custom ids automatically open accordions when users click within another accordion that links to either

• the id of an accordion section heading
• an id within the content of an accordion (this will also automatically navigate to and open accordions on page load)

This feature will only be used if the anchor_navigation flag is passed as true. This mitigates performance risk from event listeners on a large number of links.

Unlike with the accordion-wide custom id attribute, any ids passed to accordion headings as part of this are not stored in localStorage. ids do not need to be unique across your domain, but should still be unique in the context of the page.

How it looks (preview)

Heading levels should only increase by one (heading-order) (see guidance)

Possible reasons why:

• Unable to determine previous heading

Element can be found using the selector:

.govuk-accordion__section:nth-child(5) > .govuk-accordion__section-header > .govuk-accordion__section-heading

How to call this example

<%= render "govuk_publishing_components/components/accordion", {
  anchor_navigation: true,
  items: [
    {
      heading: {
        text: "Writing well for the web",
        id: "writing-well-for-the-web-1"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is content for accordion 1 of 2</p><p class=\"govuk-body\">This content contains a <a href=\"#anchor-nav-test-1\" class=\"govuk-link\">link</a></p>")
      }
    },
    {
      heading: {
        text: "Writing well for specialists"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\" id=\"anchor-nav-test-1\">This is content for accordion 2 of 2</p>")
      }
    },
    {
      heading: {
        text: "Know your audience"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is the content for Know your audience.</p>")
      }
    },
    {
      heading: {
        text: "How people read"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is the content for How people read.</p>")
      }
    }
  ]
} %>