Proposal: <more> element inside <ul>, <ol>, <menu> (or possibly also inside some other elements)

[Zhang-Junzhi]

What problem are you trying to solve?

HTML restricts certain elements to only contain specific other elements or only appear within particular elements. Sometimes, when developers want to semantically indicate that a parent element has the capability to expand and collapse, there is a lack of tags that can express this expand and collapse semantics.

What solutions exist today?

No response

How would you solve it?

For example, when I want to indicate that the content of a <ul> is expandable, I have to end up writing code like this:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
    <li><button type="button">More<button></li> <!--lazy load-->
</ul>

or like this:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
    <li><button type="button>More<button></li> <!--preoaded, but collapsed by default due to spatial constraint-->
    <li hidden>...</li>
    <li hidden>...</li>
    <li hidden>...</li>
    ...
</ul>

As you can see, the item with <button> is not semantically of the same conceptual level as the others.

Or there's a "<button> outside" solution:

<div>
<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li hidden>...</li>
    <li hidden>...</li>
    <li hidden>...</li>
</ul>
<button type="button>More</button>
</div>

However, this doesn't relates the <button> to the list closely(although we can relate them by accessibility attribute such as aria-controls, but more is plain text, and still doesn't have native semantics like <details> and <summary>). Moreover, the <button> needs to be deemed as a necessary part of an expandable list(or an expandable context menu etc.). Putting it outside makes the structure weird, especially when the more indicator is visually very tight with the list(or menu), consider the following code:

<div>
<menu id="context-menu">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li hidden>...</li>
    <li hidden>...</li>
    <li hidden>...</li>
</ul>
<button type="button><svg id="down-arrow-key">...</svg></button>
</div>

Anything else?

I suggest adding a <more> element, which can enhance the semantic meaning of the document. Compared to using tags like <li> or an element outside to indicate that the content is not fully displayed and there is more to come, the <more> element has a clearer semantic meaning. The <more> can be further divided into two sub-types of semantics:

1. one that represents the collapsing semantics (due to spatial constraint);
2. and one that represents the lazy loading semantics (either due to spatial constraints, or for the purpose of throttling, or due to some intentional limitation by the website (such as requiring certain actions to be completed before continuing to browse), or a combination of these reasons):

===

1. The way to represent the lazy loading semantics is to just leave the content of <more> empty:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
    <more></more>
</ul>

2. The way to represents the collapsing semantics is to contain the collapsed part:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
    <more>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        ...
    </more>
</ul>

[keithamus]

Can you please explain why <details> isn't sufficient here?

[Zhang-Junzhi]

Can you please explain why <details> isn't sufficient here?

They are quite different. The difference between <more> and <details> is that when <more> is not expanded, its parent element can partially display detailed content, whereas <details> only provides a title-like display when not expanded.

<summary> can not contain <li> elements, so I cannot achieve display of partially detailed content.

[M-Valentino]

These ideas could go along well with these ones here: #10245