/prog/ - HTML tree views

Name: Anonymous 2020-06-28 8:48

Why do we have a shitload of toy elements like <dicksizepicker>, but not one for a very common requirement of displaying hierarchical elements? And why does every autistic Linuxer write their own, half-functional library for that?

Name: Anonymous 2020-06-28 9:16

http://void.wikidot.com/code:tree-content

Name: Anonymous 2020-06-28 12:03

>>1
<dicksizepicker> is a very useful element if you're not a small dick shortcel.

Name: Anonymous 2020-06-28 13:24

tinydickman detected

Name: Anonymous 2020-06-28 15:33

<ul>

,

<li>

Name: Anonymous 2020-06-28 20:40

>>5
Not collapsible.

Name: Anonymous 2020-06-29 1:54

>>6
wow its so hard

<style type="text/css">
ul                          {cursor: pointer}
ul.collapsed > *            {display: none;}
ul:not(.collapsed):before   {content: "–";}
ul.collapsed:before         {content: "+";}
</style>

<ul onclick="t = event.target; t.classList.toggle('collapsed'); t.setAttribute('aria-expanded', '' + !t.classList.contains('collapsed'))">
    <li>item 1</li>
    <li>item 2</li>
</ul>

Name: Anonymous 2020-06-29 7:51

>>7

Greenspun's tenth rule in action?

Name: Anonymous 2020-06-29 9:39

I don't know if this is well known, but this is something I figured out a while ago.

<!DOCTYPE html>
<html>
<body>
<details>
  <summary>The root</summary>
  <details>
    <summary>Child 1</summary>
    <p>Leaf</p>
  </details>
  <details>
    <summary>Child 2</summary>
    <p>Leaf</p>
  </details>
  <details>
    <summary>Child 3</summary>
      <details>
        <summary>Grandchild 1 of 3</summary>
        <p>Leaf</p>
      </details>
  </details>
</details>
</body>
</html>

Info about the details tag: https://www.w3schools.com/tags/tag_details.asp

Name: Anonymous 2020-06-29 9:42

>>9
Oh, and add
details {padding-left: 2em;}
as a piece of css to get the shape of the tree structure.

Name: Anonymous 2020-06-29 9:44

>>10
No j*vascript needed ^_^

Name: Anonymous 2020-06-29 10:51

>>10,9 that was already presented in >>2

Name: Anonymous 2020-06-29 11:58

>>12
Ah, cool.

HTML tree views

1 Name: Anonymous 2020-06-28 8:48

2 Name: Anonymous 2020-06-28 9:16

3 Name: Anonymous 2020-06-28 12:03

4 Name: Anonymous 2020-06-28 13:24

5 Name: Anonymous 2020-06-28 15:33

6 Name: Anonymous 2020-06-28 20:40

7 Name: Anonymous 2020-06-29 1:54

8 Name: Anonymous 2020-06-29 7:51

9 Name: Anonymous 2020-06-29 9:39

10 Name: Anonymous 2020-06-29 9:42

11 Name: Anonymous 2020-06-29 9:44

12 Name: Anonymous 2020-06-29 10:51

13 Name: Anonymous 2020-06-29 11:58