In T147338 we recognised 2 solutions which could achieve this goal
- No FOUC
- Can be progressively enhanced to include remembering whether a section was toggled
- Trivially simple to style, minimising the hit to top-loaded styles.
- Supports all Grade A and C browsers.
- A dramatic DOM structure change – we'll need to move section headings inside of section containers.
- The simplicity of the styles comes at the cost of additional complexity in constructing the page.
- As the name implies, it's a hack…
Details / section tags ( as suggested by @Yair_rand )
- Limited styling needed
- Gracefully degrades
- IE6 will render the content with the HTML5 shim.
- This is mostly accessible - in Chrome for example you can expand with enter key. Older versions however may experience issues.
- Section collapsing is instantly available and usable even on 2G connections as no JS is required.
- Complex change in MobileFormatter - we'd need to wrap all sections and headings in a container
- IE6 without JS will not render any content due to the way it handles new HTML5 elements.
- Section collapsing will disappear for certain browsers that support JS. most notably Internet Explorer/Edge based phones.
- another way at looking at this is we exert pressure on IE to adopt this standard. We are a big website. We have a chance to make the web better.
- Some people may not like the markup
- Will be hard to expand sections on tablet mode without resorting to JS. We'll likely to have the same problem that we are trying to solve but with tablets instead.
Do we want to explore these any further?