To move this along the developers of the team got together and brainstormed possible solutions. We are going to prototype all solutions. We will demo these prototypes to @nirzar and @ovasileva.
The prototypes are:
= Adding click handlers
Will be added to all headers to allow sections to be expanded (which will be removed when the toggle code loads)
Owner: @Jdlrobson
Link:
Pros:
Cons:
= Checkbox hack
Owner: @phuedx
Link:
Pros:
Cons:
= Sections expanded by default with table of contents
Owner: @bmansurov
Link: https://gerrit.wikimedia.org/r/#/c/313874/
Pros:
* ToC after lead section for all types of browsers: JS/non-JS, mobile/tablet.
* Less tech debt as we won't be rendering MF version of ToC and as we'll be removing the section collapsing code
* No FOUC.
* Progressively enhanced ToC, viewable in an overlay for easy navigation without leaving the read position.
* Allows easy searching on the page as there are no collapsed sections.
* Consistent look and feel across form factors as opposed the current situation where ToC is visible on tablet-sized devices only.
* Printing styles don't need special treatment as sections are expanded.
* No need to worry if JS fails rendering collapsed sections useless as there is no collapsing at all.
Cons:
* Non-JS users have to scroll to the top of the page to see the ToC.
* On articles with many headings, the HTML size may get bigger a little bit. But, this increase may also be offset by the decrease in the modules we ship as we'd be removing `mobile.toggle` related code.
The owners of each should be prepared for the meeting to be able to list pros and cons of each approach.