This is the content for Writing well for the web.
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)
This is the content for Writing well for specialists.
This is the content for Know your audience.
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"
}
}
]
} %>