Ensure all details-summary tags have the open attribute

[Jaifroid]

Looking at wikipedia_en_history_maxi_2019-08.zim, there is inconsistency in the application of the open attribute on the details tag. Details corresponding to an h3, or h4 tag have the open attribute in the source html, but sections corresponding to an h2 tag have no open attribute. For clients that do not run any included JavaScript (and cannot do so), it results in what you see in the screenshots below. This is problematic because, for example, endnotes won't work if the corresponding references section is closed. It also seems very odd to have top-level sections closed while more detailed sections are open.

Here also is sample HTML from the same page to show the issue in code. The solution is simply ensuring that details sections corresponding to h2 tags have the open attribute.

HTML (unprocessed source html as extracted from above ZIM, with cuts at ... ):

<details data-level="3" open="">
    <summary class="section-heading"><h3 id="In_popular_culture">In popular culture</h3></summary>
<div class="thumb tright">.
    ...
</details>

<details data-level="2">
    <summary class="section-heading"><h2 id="See_also">See also</h2></summary>
<div class="div-col columns column-width" style="-moz-column-width: 18em; -webkit-column-width: 18em; column-width: 18em;   ">
    ...
</details><details data-level="2">
    <summary class="section-heading"><h2 id="Notes">Notes</h2></summary>
    ...

Screenshots on clients that do not process JavaScript (Kiwix JS in jQuery mode):

Originally posted by @Jaifroid in #838 (comment)

[kelson42]

@Jaifroid What goes wrong exactly from a user point-of-view? In which file this is visible?

[Jaifroid]

It's in all recent files I've tested (of the "maxi" type), but the one illustrated above as an example is wikipedia_en_history_maxi_2019-08.zim.

From the user's perspective, it's visually inconsistent and disorientating to have primary headings closed while secondary headings (containing detail) are open. It's very confusing. Just look at screenshot above. Why are "Definitions" and "History" closed, while "Sources of Knowledge" is open? A user might not even think to click on those headings to open them, just assuming they are titles with no content.

The above issue affects all clients. But a serious problem is that, for clients that do not run JS-in-the-ZIM, it is impossible to jump to endnotes / references unless the user scrolls down to the references, opens the section, and then scrolls back up to the footnote...

[kelson42]

@Jaifroid Thx, do you have an example of article where this is wrong? It is important to have a concrete and detailed example of what is wrong to (1) been able to reproduce the problem (2) check that the problem is fixed.

[Jaifroid]

Yes, the example given above: Aztecs in the history ZIM.

[kelson42]

See also #952

[kelson42]

@ISNIT0 What is your feedback on this? It seems to me if the problem is confirmed that the section collapsing system is still and again broken. Looks like a regression here?

[ISNIT0]

@Jaifroid I think my comment here (#838 (comment)) relates to this issue.
If I understand correctly this issue is about just the no-js rendering of the page?

@kelson42 This is not related to the recent issues with section collapsing

[Jaifroid]

@ISNIT0 Yes, the main effect is in readers that do not render JS-from-the-ZIM. However, there is the broader issue that the details tags are inconsistently marked as open. Lower ones (h3, h4) have the open attribute, while higher ones (h2) don't, and that seems inconsistent regardless of how subsequent rendering is applied. Just marking them all consistently as open, and then closing any that you need to in JS would IMHO be the way to fix this.

[ISNIT0]

This was a design decision (albeit flawed). Thanks for reporting the issue, we'll get a fix done asap