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 hash is for the outermost element in the accordion.

Each item can also have a data_attributes hash. These data_attributes are placed on the button that triggers the opening and closing - useful for differentiating between each section of the accordion.

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: {
    gtm: "gtm-accordion",
    ga: "ga-accordion",
    module: "govuk-accordion gem-accordion",
    anchor_navigation: false,
    show_text: "Show",
    hide_text: "Hide",
    show_all_text: "Show all sections",
    hide_all_text: "Hide all sections",
    this_section_visually_hidden: " this section"
  },
  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: {
        gtm: "gtm-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: {
        gtm: "gtm-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: {
        gtm: "gtm-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: {
        gtm: "gtm-accordion-item-4"
      }
    }
  ]
} %>