That works! :)

Only thing is, on a laptop screen, the Expand button is all the way across the screen from the list title. But not a deal breaker.

I've come up with a better idea. Try this

<div class="mw-collapsible mw-collapsed">
Title of bullet list
<div class="mw-collapsible-content">
* item
* another item
* yet another item
</div></div>

Thanks!

Is this the relevant code?

<div class="toccolours mw-collapsible mw-collapsed">
This text is not collapsible; but the next is collapsible and hidden by default:
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>

And presumably the bulleted list would also have to be done HTML? (Racks brain trying to remember things from the 90s :D then just Qwants it)

 <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 

I never thought of this before, but you can achieve this with raw HTML tags. The manual: https://www.mediawiki.org/wiki/Manual:Collapsible_elements An example: https://www.mediawiki.org/?oldid=7943916. This is jQuery way because the tag is not supported yet. (https://phabricator.wikimedia.org/T31118)