This is the content for Writing well for the web.
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)
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: {
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"
}
}
]
} %>