JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container font-weight-bold">
  <div class="row">
    <div class="col-12">
      <div class="arrow" data-toggle="collapse" data-target="#b1"></div>
      <a href="#" type="button">Lorem </a>
      <div class="col-12 collapse border-left border-primary ml-1" id="b1">
        <div class="arrow" data-toggle="collapse" data-target="#b2"></div>
        <a href="#" type="button">is simply dummy</a>
        <div class="col-12 collapse border-left border-primary ml-1" id="b2">
          <a href="#" type="button" class="ml-3">Loprintingry.</a>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="arrow" data-toggle="collapse" data-target="#b3"></div>
      <a href="#" type="button">Lom Ipsum is simtry.</a>
      <div class="col-12 collapse border-left border-primary ml-1" id="b3">
        <div class="arrow" data-toggle="collapse" data-target="#b4"></div>
        <a href="#" type="button">Loretting industry.</a>
        <div class="col-12 collapse border-left border-primary ml-1" id="b4">
          <div class="arrow" data-toggle="collapse" data-target="#b5"></div>
          <a href="#" type="button"> dummy text of the printing an</a>
          <div class="col-12 collapse border-left border-primary ml-1" id="b5">
            <a href="#" type="button" class="ml-3">Lpsum isustry.</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <a href="#" type="button" class="ml-3">Lorem Ipsury.</a>
    </div>
  </div>
</div>

CSS

.arrow {
  display: inline-block;
  position: relative;
  user-select: none;
  left: -4px;
  height: 16px;
  width: 16px;
}

.opBox polyline{
  fill:white;
  stroke:#444;
  stroke-width:2;
}

.opBox path{
  fill:#666;
}

.opBox path.m{
  fill:#444;
}

.opBox.active:hover path.m{
  fill:DodgerBlue;
}

.opBox:hover path{
  fill:DodgerBlue;
}

.opBox.active:hover polyline, .opBox:hover polyline{
  stroke:DodgerBlue;
}


.opBox.active path{
  fill:none;
}

.opBox.active path.m{
  fill:#444;
}

.opBox:active polyline{
  fill:#444;
  stroke:#444 !important;
}

.opBox.active:active path{
  fill:none;
}

.opBox.active:active path.m{
  fill:white;
}

.opBox:active path{
  fill:white;
}

JavaScript

document.querySelectorAll(".arrow").forEach((e) => {
	let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute('height', '16');
  svg.setAttribute('width', '16');
  svg.setAttribute('viewBox', '0 0 16 16');
  svg.onclick = () => svg.classList.toggle("active");

  for (var att, i = 0, atts = e.attributes, n = atts.length; i < n; i++) {
    att = atts[i];
    svg.setAttribute(att.nodeName, att.nodeValue);
  }
  svg.classList.toggle("opBox");
  
  svg.innerHTML = '<polyline points="1,1 1,15 15,15 15,1 1,1"></polyline><path d="M7 3 L9 3 L9 7 L13 7 L13 9 L9 9 L9 13 L7 13 L7 9 L3 9 L3 7 L7 7 Z"> </path><path class="m" d="M3 7 L13 7 L13 9 L3 9 Z"></path>'
  
  e.parentNode.replaceChild(svg, e);
})