title: Python Dash nested html ul list
body: <p>I want to create a dash html component to show a nested collapsable tree of a certain depth. I have an html div and I want this to contain a root <code>html.Ul</code>. 
  For each depth I have a labels list and a list of list with the correspondant subtrees, that are the labels for the next depth. </p>
  
  <pre><code>html.Ul([
      html.Li([
                'subtotal1',
                html.Ul([html. Li([...] ) ]),
                'subtotal2', 
                html. Ul([html. Li([...]) ] )             
      ] ) 
  ])
  </code></pre>
  
  <p>this is my code for one depth:</p>
  
  <pre><code>html_lists = []
  for i in reversed(range(1,2)):
      html_ul_list = html.Ul([])
      pp.pprint(fp_data[i], indent = 4)
  
      for cat in fp_data[i]['unique']:
          html_ul_list.children.append(
              html.Li([cat,
                       html.Ul(
                           [html.Li(fp_data[i]['lists'][idx]) for idx in range(0,len(fp_data[i]['lists']))]
  
                           )
                       ])
              )
  
      html_lists.append(html_ul_list)
  </code></pre>
  
  <p>where</p>
  
  <pre><code>fp_data[0]['unique'] = ['Total']
  fp_data[0]['lists'] = [['Total|Shape','Total|FirstOrder']]
  
  fp_data[1]['unique'] = ['Total|Shape','Total|FirstOrder']
  fp_data[1]['lists'] = [['Total|Shape|Mean','Total|Shape|Kurtosis'], 
  ['Total|FirstOrder|Mean','Total|FirstOrder|GrayLevel']]
  
  fp_data[2]['unique'] = ['Total|Shape|Mean','Total|Shape|Kurtosis','Total|FirstOrder|Mean','Total|FirstOrder|GrayLevel']
  
  fp_data[2]['lists'] = [
  ['Total|Shape|Mean|x','Total|Shape|Mean|y'], 
  ['Total|Shape|Kurstosis|x','Total|Shape|Kurstosis|y'], 
  ['Total|FirstOrder|Mean|x','Total|FirstOrder|Mean|y'],
  ['Total|FirstOrder|Graylevel|x','Total|FirstOrder|GrayLevel|y'],
  ]
  </code></pre>
  
  <p>Edit: more trials with the data provided:</p>
  
  <pre><code>    html_lists = []
      for i in reversed(range(0,3)):
          html_ul_list = html.Ul([],style = {'text-align':'left', 'marginLeft':'5px'})
          pp.pprint(fp_data[i], indent = 4)
  
          for idxcat,cat in enumerate(fp_data[i]['unique']):
             print('idxcat',idxcat)
             print(fp_data[i]['lists'])
              html_ul_list.children.append(
                 html.Li([cat,
                           html.Ul(
                               [html.Li(fp_data[i]['lists'][idxcat][idx]) for idx in range(0,len(fp_data[i]['lists'][idxcat]))]
  
                               )
                           ])
                  )
  
          html_lists.append(html_ul_list)
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6TYEt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6TYEt.png" alt="enter image description here"></a></p>