JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<ul>
    <li data-toggle="collapse" data-target="#Sub1">List Item One <em class="glyphicon glyphicon-chevron-right arrow_show"></em><em class="glyphicon glyphicon-chevron-down"></em>

        <ul class="collapse" id="Sub1">
            <li>Sub-item</li>
        </ul>
        <li>List Item Two</li>
</ul>

CSS

.collapse {
  display: none;
}

.collapse.in {
  display: block;
}

.glyphicon {
    display:none;
}
.arrow_show {
    display: inline;
}

JavaScript

$('li[data-target="#Sub1"]').on("click", function() {
  $('.glyphicon-chevron-right').toggleClass('arrow_show');
  $('.glyphicon-chevron-down').toggleClass('arrow_show');
 })