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"></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;
}

.collapsed > .glyphicon .glyphicon-chevron-down {
  display: inline-block;
}

.collapsed > .glyphicon .glyphicon-chevron-right {
  display: none;
}