JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="panel panel-warning">

  <div class=panel-heading style="font-weight: bold;">
    <h4 class="panel-title">
      <div data-toggle="collapse"  href="#saleitem" class="panel-toggle">      
        <span class="glyphicon glyphicon-folder-close"  id="icontoggle"></span>
        Sale Items
      </a>    
    </h4>
   
  </div>
  
  <div id="saleitem" class="panel-collapse collapse">
     <div class="panel-body">
         table goes here
      </div>
    </div>
</div>

JavaScript

$('.glyphicon').parent().click(function(){
    if(jQuery(this).children('.glyphicon').hasClass('glyphicon-folder-close')){
        jQuery(this).children('.glyphicon').removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
    }else if(jQuery(this).children('.glyphicon').hasClass('glyphicon-folder-open')){
        jQuery(this).children('.glyphicon').removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
    }
});