Раскрывающийся список дерево js

window.onload = function() { 
  docs.forEach(function(item, i, arr) { 
    for (i = 0; i <= 21; i++) { 
      var d = document.createElement("div"); 
      document.body.appendChild(d); 
      d.id = "Node" + i; 
      d.innerHTML = '<div class="TreeNodeText">' + arr[i].title + '</div><details><summary></summary><div id="Paragraph' + i + '"><div>'; 
      for (var a = 0; a < arr[i].children.length; a++) { 
        document.getElementById("Paragraph" + i).innerHTML = '' + arr[i].children[i].title + ''; 
      } 
 
    } 
  }); 
} 
 
const docs = [{ 
  title: '01-05 I. Живые животные; продукты животного происхождения (Группы 01-05)', 
  children: [{ 
      title: '01 Живые животные', 
      children: [{ 
          title: '0101 ... Лошади, ослы, мулы и лошаки живые', 
          children: [{ 
              title: '0101 2 ... лошади ' 
            }, 
            { 
              title: '0101 21 000 0 чистопородные племенные животные  ' 
            }, 
            { 
              title: '0101 29 ... прочие  ' 
            }, 
            { 
              title: '0101 30 000 0 ослы  ' 
            }, 
            { 
              title: '0101 90 000 0 прочие  ' 
            } 
          ] 
        }, 
 
        { 
          title: '0105 ... Домашняя птица живая, то есть куры домашние (Gallus domesticus), утки, гуси, индейки и цесарки', 
          children: [{ 
              title: '0105 1 ... массой не более 185 г  ' 
            }, 
            { 
              title: '0105 9 ... прочие ' 
            } 
          ] 
        }, 
        { 
          title: '0106 ... Живые животные прочие', 
          children: [{ 
              title: '0106 1 ... млекопитающие  ' 
            }, 
            { 
              title: '0106 2 ... рептилии (включая змей и черепах)  ' 
            }, 
            { 
              title: '0106 3 ... птицы  ' 
            }, 
            { 
              title: '0106 4 ... насекомые  ' 
            }, 
            { 
              title: '0106 9 ... прочие ' 
            } 
          ] 
        } 
      ] 
    }, 
    { 
      title: '02 Мясо и пищевые мясные субпродукты', 
      children: [{ 
          title: '0201 ... Мясо крупного рогатого скота, свежее или охлажденное', 
          children: [{ 
              title: '0201 1 ... туши и полутуши  ' 
            }, 
            { 
              title: '0201 2 ... прочие отруба, необваленные  ' 
            }, 
            { 
              title: '0201 3 ... мясо обваленное  ' 
            } 
          ] 
        }, 
 
      ] 
    }, 
    { 
      title: '03 Рыба и ракообразные, моллюски и прочие водные беспозвоночные  ', 
      children: [{ 
          title: '0301 ... Живая рыба', 
          children: [{ 
              title: '0301 1 ... декоративная рыба  ' 
            }, 
            { 
              title: '0301 9 ... живая рыба прочая  ' 
            } 
          ] 
        }, 
 
      ] 
    }, 
    { 
      title: '04 Молочная продукция; яйца птиц; мед натуральный; пищевые продукты животного происхождения, в другом месте не поименованные или не включенные   ', 
      children: [{ 
          title: '0401 ... Молоко и сливки, несгущенные и без добавления сахара или других подслащивающих веществ', 
          children: [{ 
              title: '0401 1 ... с содержанием жира не более 1 мас.%  ' 
            }, 
            { 
              title: '0401 2 ... с содержанием жира более 1 мас.%, но не более 6 мас.%  ' 
            }, 
            { 
              title: '0401 4 ... с содержанием жира более 6 мас.%, но не более 10 мас.% ' 
            }, 
            { 
              title: '0401 5 ... с содержанием жира более 10 мас.%  ' 
            } 
          ] 
        }, 
 
      ] 
    }, 
    { 
      title: '05 Продукты животного происхождения, в другом месте не поименованные или не включенные   ', 
      children: [{ 
          title: '0501 00 000 0 Человеческий волос, необработанный, мытый или немытый, очищенный или неочищенный; отходы человеческого волоса' 
        }, 
        { 
          title: '0502 ... Щетина свиная или кабанья; барсучий или прочий волос, используемый для производства щеточных изделий; их отходы', 
          children: [{ 
              title: '0502 10 000 0 щетина свиная или кабанья и ее отходы ' 
            }, 
            { 
              title: '0502 90 000 0 прочие  ' 
            } 
          ] 
        }, 
        { 
          title: '0504 00 000 0 Кишки, пузыри и желудки животных (кроме рыбьих), целые и в кусках, свежие, охлажденные, замороженные, соленые, в рассоле, сушеные или копченые' 
        }, 
        { 
          title: '0505 ... Шкурки и прочие части птиц с перьями или пухом, перья и части перьев (с подрезанными или неподрезанными краями) и пух, очищенные, дезинфицированные или обработанные для хранения, но не подвергнутые дальнейшей обработке; порошок и отходы перьев или их частей', 
          children: [{ 
              title: '0505 1 ... перья птиц, используемые для набивки; пух  ' 
            }, 
            { 
              title: '0505 90 000 0 прочие  ' 
            } 
          ] 
        }, 
        { 
          title: '0506 ... Кости и роговой стержень, необработанные, обезжиренные, подвергнутые первичной обработке (без придания формы), обработанные кислотой или дежелатинизированные; порошок и отходы этих продуктов', 
          children: [{ 
              title: '0506 10 000 0 оссеин и кости, обработанные кислотой ' 
            }, 
            { 
              title: '0506 90 000 0 прочие  ' 
            } 
          ] 
        }, 
        { 
          title: '0507 ... Слоновая кость, панцири черепах, ус китовый и щетина из китового уса, рога, оленьи рога, копыта, ногти, когти и клювы, необработанные или подвергнутые первичной обработке, но без придания формы; порошок и отходы этих продуктов', 
          children: [{ 
              title: '0507 10 000 0 слоновая кость; порошок и отходы  ' 
            }, 
            { 
              title: '0507 90 000 0 прочие  ' 
            } 
          ] 
        }, 
        { 
          title: '0508 00 000 0 Кораллы и аналогичные материалы, необработанные или подвергнутые первичной обработке; раковины и панцири моллюсков, ракообразных или иглокожих и скелетные пластины каракатиц, необработанные или подвергнутые первичной обработке, без придания формы, порошок и отходы этих продуктов' 
        }, 
        { 
          title: '0510 00 000 0 Амбра серая, струя бобровая, циветта и мускус; шпанки; желчь, в том числе сухая; железы и прочие продукты животного происхождения, используемые в производстве фармацевтических продуктов, свежие, охлажденные, мороженые или обработанные иным способом для кратковременного хранения' 
        }, 
        { 
          title: '0511 ... Продукты животного происхождения, в другом месте не поименованные или не включенные; павшие животные группы 01 или 03, непригодные для употребления в пищу', 
          children: [{ 
              title: '0511 10 000 0 сперма бычья  ' 
            }, 
            { 
              title: '0511 9 ... прочие ' 
            } 
          ] 
        } 
      ] 
    } 
  ] 
}, ]

.treeHTML { 
  line-height: normal; 
} 
 
.treeHTML details { 
  display: block; 
} 
 
.treeHTML div { 
  position: relative; 
  margin: 0 0 0 .5em; 
  padding: 0 0 0 1.2em; 
} 
 
.treeHTML div:not(:last-child) { 
  /* необязательно */ 
  border-left: 1px solid #ccc; 
} 
 
.treeHTML div:before { 
  /* необязательно */ 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 1.1em; 
  height: .5em; 
  border-bottom: 1px solid #ccc; 
} 
 
.treeHTML div:last-child:before { 
  /* необязательно */ 
  border-left: 1px solid #ccc; 
} 
 
.treeHTML summary { 
  /* стилями можно задать любую форму, например, тот же плюс. Я специально не стала усложнять, чтобы можно было проще разобраться в коде */ 
  position: absolute; 
  top: 0; 
  left: 0; 
  cursor: pointer; 
} 
 
.treeHTML details[open] summary { 
  /* убрать рамку при фокусе */ 
  outline: none; 
} 
 
.TreeNodeText { 
  position: relative; 
  height: 100%; 
  border: 1px solid #bbb; 
  border-left: none; 
  box-shadow: 0 2px 2px -2px; 
  padding: 0 5px 0 10px; 
  border-radius: 2px; 
  min-width: 230px; 
  flex: 1 0 auto; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  background-color: #fff; 
  font-weight: 700; 
  border-left: 1px solid #bbb; 
  padding-bottom: 5px; 
  padding-top: 5px; 
  margin-bottom: 10px; 
} 
 
 
/* details summary:before { 
    content: url("../images/plus-in-circle.png"); 
    position: absolute; 
    top: 3px; 
    left: -5px; 
} 
 
details[open] summary:before { 
    content: url("../images/minus-in-circle.png"); 
    content: "sad"; 
     position: absolute; 
    top: 3px; 
    left: -5px; 
} */