JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<a class="egrp d-table" data-toggle="collapse" href="#grp1" role="button" aria-expanded="false" aria-controls="grp1">Order Resources</a>
<div class="collapse" id="grp1">
  <a href="#" class="egrp-item d-table">Get Order State</a>
  <a href="#" class="egrp-item d-table">Create Order</a>
</div>


<a class="egrp d-table" data-toggle="collapse" href="#grp2" role="button" aria-expanded="false" aria-controls="grp2">    Product Resources</a>
<div class="collapse" id="grp2">
  <a href="#" class="egrp-item d-table">Get Product</a>
  <a href="#" class="egrp-item d-table">Get Products</a>
</div>

<a class="egrp d-table" data-toggle="collapse" href="#grp3" role="button" aria-expanded="false" aria-controls="grp3">Login</a>
<div class="collapse sr-only" id="grp3">
  <a href="#" class="egrp-item d-table">Login</a>
</div>

<br />
<br />
<div id="boxy">CLICKED</div>


<!-- use egrp class but use endpoint title and href -->

CSS

a.egrp,
a.egrp-item {
  color: #F9F3FD;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
}

.egrp-item {
  border-left: 2px solid #e0e2e8;
  padding-left: 15px;
  margin-left: 10px;
}

.egrp-item.text-warning {
  border-left: 2px solid #3c4151;
}

body {
  background-color: #000;
}

#boxy {
  display:none;
  font-weight:bold;
  background-color:pink;
}

JavaScript

$(document).on("click", "a.egrp", function() {

  var link = $(this);
  var desel = link.hasClass("text-warning");
  link.siblings().collapse("hide");
  $("a.egrp.text-warning").removeClass("text-warning");
  $("a.egrp-item.text-warning").removeClass("text-warning");
  if (!desel) {
    link.addClass("text-warning");
  }
  
  var content = $("#" + link.attr("href").substr(1));
  if(content.hasClass("sr-only")) {
     content.find("a").click();
  }
  
});
$(document).on("click", "a.egrp-item", function() {
var link = $(this);
  $("a.egrp-item.text-warning").removeClass("text-warning");
  link.addClass("text-warning");
  $("#boxy").html(link.html()).show().fadeOut(500);
});


//add show to a div.collapse to make it expanded onload