Add vertical line along tree view when expanded

I am trying to add a vertical line along first li elements when they are expanded and remove when they are closed but its not coming out. Will li::after not do the job?. please help me with this.

This vertical line should be along the first level of heirarchy only

I have created a treeview with three list items and shown the implemeted code to which i have to apply vertical lines

var toggler = document.getElementsByClassName("caret");
var i;

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

ul, #main {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;

}
li::after{
border-left 1px solid black;
}
.caret {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none; 
}

.caret::before {
  content: "25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);  
}

.nested {
  display: none;
  border-left 1px solid #000
}

.active {
  display: block;
  border-left 1px solid #000
}

<ul id="main">
  <li><span class="caret">First</span>
    <ul class="nested">
      <li>sub1</li>
      <li>sub2</li></ul>
      <li><span class="caret">Second</span>
        <ul class="nested">
          <li>sub1</li>
          <li>sub2</li></ul>
          <li><span class="caret">Third</span>
            <ul class="nested">
              <li>sub1</li>
              <li>sub2</li>
            </ul>
          </li>
      </li>  
  </li>
</ul>

Answer

You can do it with .nested.active css rule like below:

You should add below css:

.nested.active{
   border-left:1px solid red;
}

Its added in this snippet:

var toggler = document.getElementsByClassName("caret");
var i;

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

ul, #main {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;

}
li::after{
border-left 1px solid black;
}
.caret {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none; 
}

.caret::before {
  content: "25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);  
}

.nested {
  display: none;
  border-left 1px solid #000
}

.active {
  display: block;
  border-left 1px solid #000
}
.nested.active{
border-left:1px solid red;
}

<ul id="main">
  <li><span class="caret">First</span>
    <ul class="nested">
      <li>sub1</li>
      <li>sub2</li></ul>
      <li><span class="caret">Second</span>
        <ul class="nested">
          <li>sub1</li>
          <li>sub2</li></ul>
          <li><span class="caret">Third</span>
            <ul class="nested">
              <li>sub1</li>
              <li>sub2</li>
            </ul>
          </li>
      </li>  
  </li>
</ul>