Step by step navigation example

Open a step by default

Pass the index of the step to open by default. This is the nth step in the list, regardless of the number shown next to the step. Note that in the example below, the third step is open by default, not the step numbered ‘3’.

How it looks (preview)

1. Step 1: Closed by default

   Well, open now, obviously.

2. Step 2: Also closed by default

   Hello.

3. and Open by default

   Hello!

4. Step 3: And again closed by default

   Goodbye...

How to call this example

<%= render "govuk_publishing_components/components/step_by_step_nav", {
  show_step: 3,
  steps: [
    {
      title: "Closed by default",
      contents: [
        {
          type: "paragraph",
          text: "Well, open now, obviously."
        }
      ]
    },
    {
      title: "Also closed by default",
      contents: [
        {
          type: "paragraph",
          text: "Hello."
        }
      ]
    },
    {
      title: "Open by default",
      logic: "and",
      contents: [
        {
          type: "paragraph",
          text: "Hello!"
        }
      ]
    },
    {
      title: "And again closed by default",
      contents: [
        {
          type: "paragraph",
          text: "Goodbye..."
        }
      ]
    }
  ]
} %>