Topic on Skin talk:Medik

Tracked on bitbucket.org with issue 25.

Some of the articles on my wiki are very long, and I'm not using the MobileFrontend extension. So I made a gadget on my wiki to make the H2 headers collapsible, and start in a default collapsed state, when the user has a screen width of under 768px. This makes it easier to read long articles. The user can open the section they want without scrolling through unwanted information. I think it compliments nicely with this skin because the contents box is disabled on Medik. I got the idea from https://inclusive-components.design/collapsible-sections/ but had to downgrade the javascript from ES6

To install

1. copy the code from User:InnerCitadel/Gadget-collapsibleH2.js to your wiki in a page called MediaWiki:Gadget-collapsibleH2.js
2. Go to MediaWiki:Gadgets-definition and add the line "*collapsibleH2[ResourceLoader|default]|collapsibleH2.js"
3. Go to MediaWiki:Gadget-collapsibleH2 and add a description like Collapsible H2: in long articles on mobile, make the headers collapsible, with a default collapsed state
4. Add some CSS to MediaWiki:Common.css eg this CSS
5. If you want to display the edit button then add into MediaWiki:Common.css the following code .mw-editsection{display:block;}

It will only make the headers in longer articles collapse. You can change this behaviour by changing the length variable in line 11 of the script.

Is it possible to replicate this in PHP through the skin directly?

Wow, what a nice idea! Many thanks, @InnerCitadel, I'll certainly try it in the next week and let you know.

Hi Jeremy, we still discuss that in our team (maybe I'll create some configuration option for this), so stay tuned and don't worry, I'll definitely make this done. :-) Created a proposal issue for myself not to forget - https://bitbucket.org/wikiskripta/medik/issues/25/collapsible-headers.

Thanks a lot again, this is really a nice idea.

I think this is a valid feature request. Having a configuration parameter will be nice.