JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li data-toggle="collapse" data-target="#SubMenuTools" class="collapsed">
  <a href="#/" id="mainMenu"><i class="fa fa-tasks fa-fw"></i> External Tools <span class="fa fa-angle-left"></span></a>
</li>
<ul class="sub-menu collapse" id="SubMenuTools">
  <li><a href="">First tool</a></li>
  <li><a href="">Second Tool</a></li>
</ul>

CSS

.sidenav li .arrow:before {
  font-size: 1.4em;
  padding-left: 10px;
  padding-right: 10px;
  transition:0.5s;
}

JavaScript

$(document).ready(function() {
  var expand = false;
  $("#mainMenu").click(function() {
    expand = !expand;
    if (expand) {
      $(this).children("span").removeClass().addClass("fa fa-angle-down");
    } else {
      $(this).children("span").removeClass().addClass(" fa fa-angle-left");
    }
  });
});