Hi Chris,

Is this something like they'd want? (see attached video)

Custom CSS:

.collapsible h1, .collapsible.collapsed h1 {
  background: transparent;
}
.collapsible h1:after {
  color: red;
  content: 'Collapse';
  display: inline-block;
  float: right;
  font-family: serif;
  font-size: 0.75em;
}
.collapsible.collapsed h1:after {
  color: blue;
  content: 'Expand';
}

Basically the arrow itself is the background image of the .collapsible h1 element. So first we set the background to transparent to remove that. Then you can use the :after pseudoselector to set text content to come appended to the header. Then you can apply formatting, etc.

The element itself has the .collapsible class, but when it is actually collapsed, it has the additional .collapsed class, so you can select .collapsible to set default values and for the expanded state, and select .collapsible.collapsed to set values for the collapsed state.

Hope this helps!