You should be able to do that with some simple CSS:
.c-accordion__title:after {
content: "(Click to Expand)";
}
.is-open > .c-accordion__title:after {
content: "(Click to Hide)";
}
@antonyalston I replace the +/- with disclosure triangles on the left. Here is the CSS with some other customizing. You can see how it looks here.
/*
* Put disclosure triangles before the accordion item title
* ( +/- occurs on right margin of page already), with a right margin
*/
.c-accordion__title::before {
position: relative;
top: 50%;
right: 0;
content: "\25B6";
color: #777;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-right: 1em;
}
/* Downward disclosure triangle when open */
.is-open .c-accordion__title::before {
content: "\25BC";
}
/* Remove +/- on the right */
.c-accordion__title::after,
.is-open .c-accordion__title::after {
content: "";
}
/* Shade the title line; adjust title text */
.c-accordion__title {
background-color: #f2f2f2;
padding: 0.2em;
font-size: 23px;
font-weight: 400;
}
/* Change shade on hover */
.c-accordion__title:hover {
background-color: #e0e0ff;
}
/* Indent the content beneath title */
.c-accordion__content {
margin-left: 2em;
}
