JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="wrapper">
  <div id="sidebar-wrapper">
    <div id="wrapperMenu" class="sidebar-nav">
      <a href="#detailsSubMenu" class="list-group-item" data-toggle="collapse" data-parent="#wrapperMenu">Menu #1<i class="glyphicon glyphicon-arrow-down"></i></a>
      <div class="collapse" id="detailsSubMenu">
        <a href="#" class="list-group-item">A1</a>
        <a href="#" class="list-group-item">A2</a>
        <a href="#" class="list-group-item">A3</a>
      </div>
      <a href="#editSubMenu" class="list-group-item" data-toggle="collapse" data-parent="#wrapperMenu">Menu #2<i class="glyphicon glyphicon-arrow-down"></i></a>
      <div class="collapse" id="editSubMenu">
        <a href="#" class="list-group-item">B1</a>
        <a href="#" class="list-group-item">B2</a>
      </div>
    </div>
  </div>

JavaScript

$('[data-toggle="collapse"]').click(function(){
	$(this).children(".glyphicon").toggleClass("glyphicon-arrow-down glyphicon-arrow-up")
})