UPD Hide / show dropdown tree

 window.onload = function() { addItems(docs, document.getElementById("derevo")); } function addItems(items, parent) { if (!items) return; items.forEach(function(item, i, arr) { var d = document.createElement("div"); d.innerHTML = '<div class="TreeNodeText">' + item.title + '</div>' + ((item.children && item.children.length) ? '<details><summary></summary><div class="paragraph"><div></details>' : ''); parent.appendChild(d); addItems(item.children, d.querySelector(".paragraph")); }) } 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 ... прочие ' } ] } ] } ] }, ] 

 .paragraph { padding-left: 10px; } .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; content: url("https://samizdatt.net/templates/BlueSkin/dleimages/plus_fav.gif"); } .treeHTML details[open] summary { outline: none; } details summary::-webkit-details-marker { display: 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("https://samizdatt.net/templates/BlueSkin/dleimages/plus_fav.gif"); position: absolute; top: 10px; left: -8px; } details[open] > summary:before { content: url("http://cdn1.iconfinder.com/data/icons/splashyIcons/remove_minus_sign_small.png"); position: absolute; top: 10px; left: -8px; } 

 <div class="treeHTML" id="derevo"></div>