Accordion (experimental) example

With data attributes

Adds custom data attributes to each section of the accordion. Accepts a hash, so multiple attributes can be added.

The data_attributes option applies attributes to the outermost element in the accordion. Each item can also have a data_attributes hash, which are placed on the button that triggers the opening and closing - useful for differentiating between each section of the accordion.

Data attributes can be added to the ‘Show/hide all’ link using the data_attributes_show_all option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). Currently, this is only used for tracking with Universal Analytics.

If track_options within data_attributes_show_all is set, then it is possible to pass a custom dimension when ‘Show/Hide all’ is clicked.

How it looks (preview)

Writing well for the web

This is the content for Writing well for the web.

Writing well for specialists

This is the content for Writing well for specialists.

Know your audience

This is the content for Know your audience.

How people read

This is the content for How people read.

How to call this example

<%= render "govuk_publishing_components/components/accordion", {
  data_attributes: {
    custom_data_attr: "custom-data-attr-accordion"
  },
  data_attributes_show_all: {
    "tracking-options": "{ 'dimension114': 1 }"
  },
  items: [
    {
      heading: {
        text: "Writing well for the web"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is the content for Writing well for the web.</p>")
      },
      data_attributes: {
        custom_data_attr: "custom-data-attr-accordion-item-1"
      }
    },
    {
      heading: {
        text: "Writing well for specialists"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is the content for Writing well for specialists.</p>")
      },
      data_attributes: {
        custom_data_attr: "custom-data-attr-accordion-item-2"
      }
    },
    {
      heading: {
        text: "Know your audience"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is the content for Know your audience.</p>")
      },
      data_attributes: {
        custom_data_attr: "custom-data-attr-accordion-item-3"
      }
    },
    {
      heading: {
        text: "How people read"
      },
      content: {
        html: sanitize("<p class=\"govuk-body\">This is the content for How people read.</p>")
      },
      data_attributes: {
        custom_data_attr: "custom-data-attr-accordion-item-4"
      }
    }
  ]
} %>