How to make a collapsed bullet list (*not* table or discussion), with an "Expand/Show" button? : mediawiki@lemmy.cafe

[–] lens0021@programming.dev 2 points 1 year ago (3 children)

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)

permalink

fedilink

source

hideshow 3 child comments

[–] klu9@piefed.social [S] 1 point 1 year ago (2 children)

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>

permalink

fedilink

source

parent

hideshow 2 child comments

[–] lens0021@programming.dev 2 points 1 year ago (1 child)

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>

permalink

fedilink

source

parent

hideshow 1 child comment

[–] klu9@piefed.social [S] 1 point 1 year ago

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.

permalink

fedilink

source

parent

post

all 4 comments