accordion.yaml

params:
- name: id
  type: string
  required: true
  description: Must be **unique** across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes.
- name: headingLevel
  type: integer
  required: false
  description: Heading level, from 1 to 6. Default is `2`.
- name: classes
  type: string
  required: false
  description: Classes to add to the accordion.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the accordion.
- name: items
  type: array
  required: true
  description: An array of sections within the accordion.
  params:
    - name: heading.text
      type: string
      required: false
      description: The title of each section. If `heading.html` is supplied, this is ignored. This is used both as the title for each section, and as the button to open or close each section.
    - name: heading.html
      type: string
      required: false
      description: The HTML content of the header for each section which is used both as the title for each section, and as the button to open or close each section.
    - name: summary.text
      type: string
      required: false
      description: Text content for summary line. If `summary.html` is supplied, this is ignored.
    - name: summary.html
      type: string
      required: false
      description: HTML content for summary line.
    - name: content.html
      type: string
      required: true
      description: The HTML content of each section, which is hidden when the section is closed.
    - name: expanded
      type: boolean
      required: false
      description: Whether the section should be expanded upon initial load or not. Defaults to `false`.

examples:
- name: default
  data:
    id: default-example
    classes: myClass
    attributes:
      data-attribute: value
    items:
      - heading:
          text: Section A
        content:
          html: |
            <ul class="govuk-list govuk-list--bullet">
              <li>Example item 1</li>
            </ul>
      - heading:
          text: Section B
        content:
          html: |
            <ul class="govuk-list govuk-list--bullet">
              <li>Example item 2</li>
            </ul>

- name: with additional descriptions
  data:
    id: with-descriptions
    items:
      - heading:
          text: Test
        summary:
          text: Additional description
        content:
          html: |
            <ul class="govuk-list govuk-list--bullet">
              <li>Example item 1</li>
            </ul>
      - heading:
         text: Test 2
        summary:
          html: <span class="govuk-!-font-weight-regular">Additional description</span>
        content:
          html: |
            <ul class="govuk-list govuk-list--bullet">
              <li>Example item 2</li>
            </ul>
- name: with one section open
  data:
    id: one-section-open-example
    items:
      - heading:
          text: Section A
        expanded: true
        content:
          html: |
            <ul class="govuk-list govuk-list--bullet">
              <li>Example item 1</li>
            </ul>
      - heading:
          text: Section B
        content:
          html: |
            <ul class="govuk-list govuk-list--bullet">
              <li>Example item 2</li>
            </ul>

- name: with all sections already open
  data:
    id: all-sections-open-example
    items:
      - heading:
          text: Section A
        expanded: true
        content:
          html: |
            <ul class="govuk-list govuk-list--bullet">
              <li>Example item 1</li>
            </ul>
      - heading:
          text: Section B
        expanded: true
        content:
          html: |
            <ul class="govuk-list govuk-list--bullet">
              <li>Example item 2</li>
            </ul>