JSFiddle - React, Tailwind, and code Playground

by vacammar

HTML

<div style="margin-left: 10px;">

  <ul id="exa-tree-view">
    <li>
      <div class="exa-tree-view-caret exa-tree-view-box">
        <b>IT001E25624288</b>
        <div class="exa-tree-view-detail">      
          <p><b>Tipo Pdm:</b> M1</p>
          <p><b>Fonte:</b> Solare</p>    
        </div>
        <div class="exa-tree-view-node">1</div>
      </div>
      <ul class="exa-tree-view-nested">
        <li class="exa-tree-view-box">
          <b>IT001E25624288</b>
          <div class="exa-tree-view-detail">      
            <p><b>Tipo Pdm:</b> M1</p>
            <p><b>Fonte:</b> Solare</p>
          </div>        
        </li>
        <li class="exa-tree-view-box">
          <b>IT001E25624233</b>
          <div class="exa-tree-view-detail">      
            <p><b>Tipo Pdm:</b> M1</p>
            <p><b>Fonte:</b> Solare</p>
          </div>        
        </li>
        <li>
          <div class="exa-tree-view-caret exa-tree-view-box">
          <b>IT001E25624244</b>
          <div class="exa-tree-view-detail">      
            <p><b>Tipo Pdm:</b> M1</p>
            <p><b>Fonte:</b> Solare</p>
          </div> 
          <div class="exa-tree-view-node">2</div>
        </div>
          <ul class="exa-tree-view-nested">
            <li class="exa-tree-view-box">
              <b>IT001E25624255</b>
              <div class="exa-tree-view-detail">      
                <p><b>Tipo Pdm:</b> M1</p>
                <p><b>Fonte:</b> Solare</p>
              </div>            
            </li>
            <li class="exa-tree-view-box">
              <b>IT001E25624266</b>
              <div class="exa-tree-view-detail">      
                <p><b>Tipo Pdm:</b> M1</p>
                <p><b>Fonte:</b> Solare</p>
              </div>            
            </li>
          </ul>
        </li>  
      </ul>
    </li>
  </ul>

</div>

CSS

/* ExaTreeView directive */

ul, #exa-tree-view {
  list-style-type: none;
}

#exa-tree-view {
  margin: 0;
  padding: 0;
}

.exa-tree-view-caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
  border: 1px solid;
  padding: 3px;
}

.exa-tree-view-caret::before {
  content: "\25B6";
  display: inline-block;
  padding: 5px;
  color: #ed792b;
}

.exa-tree-view-caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  
}

.exa-tree-view-nested {
  display: none;
}

.active {
  display: block;
}

ul.exa-tree-view-nested>li {  
    padding: 5px;
}

.exa-tree-view-box {
    border: 1px solid #d7d7d7;
    background-color: white;
    margin-top: 5px;
    max-width: 250px;
    min-height: 75px;
}

.exa-tree-view-detail {
  padding: 5px 5px 5px 5px;
}

.exa-tree-view-detail p {
  line-height: 2px;
}

.exa-tree-view-box>b {
  font-size: 20px;
  padding: 5px;
}

.exa-tree-view-node {
    position: absolute;
    border: 1px solid #d8d8d8;
    border-radius: 50%;
    width: 30px;
    background-color: #FFF;
    text-align: center;
    padding: 5px;
    margin-left: -19px;
    margin-top: -2px;
}

/* End*/

JavaScript

var toggler = document.getElementsByClassName("exa-tree-view-caret");
var i;
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".exa-tree-view-nested").classList.toggle("active");
    this.classList.toggle("exa-tree-view-caret-down");
  });
}