[whatwg] Nested lists?

[Ian Hickson]

On Mon, 4 Aug 2008, noclip wrote:
>
> Are there plans to natively support nested unordered lists in HTML 5? 
> I'm referring here to something like this:
> 
> Top level list item
> |-- Childless second level list item
> |-- Another childless second level list
> [+]- Collapsed second level list item with children
> [-]- Expanded second level list item with children
> |    |-- Third level list item
> |    |-- Another third level list item
> |   [+]- Collapsed third level list item with children
> |   [-]- Expanded third level list item with children
> |    |    |-- Fourth level list item
> |    |    |__ Another fourth level list item
> |    |__ A final third level list item
> [+]- Another collapsed second level list item
> |__ A final second level list item

You can do the above today using the <datagrid> element and the <ul> 
element, as follows (I've put "..." where I couldn't see the elements in 
the view given above):

<datagrid>
 <ul>
  <li class="open"> Top level list item
   <ul>
    <li> Childless second level list item
    <li> Another childless second level list
    <li class="closed"> Collapsed second level list item with children
     <ul>
      ...
     </ul>
    <li class="open"> Expanded second level list item with children
     <ul>
      <li> Third level list item
      <li> Another thid level list item
      <li class="closed"> Collapsed third level list item with children
       <ul>
        ...
       </ul>
      <li class="open"> Expanded third level list item with children
       <ul>
        <li> Fourth level list item
        <li> Another fourth level list item
       </ul>
      <li> A final third level list item
     </ul>
    <li class="closed"> Another collapsed second level list item
     <ul>
      ...
     </ul>
    <li> A final second level list item
   </ul>
 </ul>
</datagrid>

(Note that the </li> end tags are implied.)

Today this works except you can't open and close the items:
   http://junkyard.damowmow.com/333

In future browsers that support <datagrid>, you should see a tree view on 
that page.

HTH,
-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'