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. Individual items can also have their own data_attributes hash, which are placed on the button that triggers the opening and closing of that section - 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: {
    custom_data_attr: "custom-data-attr-accordion"
  },
  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"
      }
    }
  ]
} %>