Component

Multi section viewer

Switches between multiple sections of HTML

This component is a wrapper for multiple section blocks. It ensures only one is shown at a time.

The sections can be defined and toggled statically, as in the examples. The module also exposes an API to show dynamic content in its own section.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Section 1

Section 2

How to call this component

<button class="govuk-button" data-toggle="multi-section-viewer" data-target="sections" data-target-section="section-1">Show Section 1</button>
<button class="govuk-button" data-toggle="multi-section-viewer" data-target="sections" data-target-section="section-2">Show Section 2</button>
<%= render "components/multi_section_viewer", {
  id: "sections",
  sections: [
    {
      id: "section-1",
      content: "Section 1"
    },
    {
      id: "section-2",
      content: "Section 2"
    }
  ]
} %>

Accessibility acceptance criteria

The component must:

• notify the user when the content changes