JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>

<button type="button" data-toggle='collapse' href='#collapseExample'><span class='glyphicon glyphicon-menu-up'></span></button>  

<div class="in" id="collapseExample">
  <div class="card card-block">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

CSS

.glyphicon-menu-up {       
    transition: transform 0.5s ease;
}

div.collapse:not(.in) + .glyphicon-menu-up {        
    transform: rotate(180deg);
}