JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
 <div class="container-fluid">
     <div class="row-fluid">
         <div class="header">
             <div class="row">
                 <div class="col-xs-10 col-sm-11 col-md-11 col-lg-11 pad-top">
                     <span id="basic_Help">Basic Information</span>
                 </div>
                 <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
                     <a id="expand" class="expand" href="#">
                         <div id="ico" class="pull-right minus_pos1 minus"></div>
                     </a>
                 </div>
             </div>
         </div>
         <div id="collapse" class="body toggle">
             test
         </div>
         <br/>
        <div class="header">
             <div class="row">
                 <div class="col-xs-10 col-sm-11 col-md-11 col-lg-11 pad-top">
                     <span id="basic_Help">Information</span>
                 </div>
                 <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
                     <a id="expand" class="expand" href="#">
                         <div id="ico" class="pull-right minus_pos1 minus"></div>
                     </a>
                 </div>
             </div>
         </div>
          <div id="collapse" class="body toggle">
             test
         </div>
     </div>
     
</div>

CSS

.minus:before{
    content:"\f147";
    font-family: FontAwesome;
    font-size: 24px;
    color:white;
    padding-right: 15px;
    float: right;
    text-decoration: none;
    cursor:pointer;
}
.plus:before{
    content:"\f196";
    font-family: FontAwesome;
    font-size: 24px;
    color:white;
    float: right;
    padding-right: 15px;
    text-decoration: none;
    cursor:pointer;
}
.header{
    height: 30px;
    background-color: #049F51;
    color: white;
    padding-left: 5px;    
    padding-bottom: 5px;
    font-size: 15px;
    letter-spacing: 1px;
}
.body{
    background-color: #f9f9f9; 
    height: 180px;
    border:1px solid #e2e2e2;
}
.expand{display:inline-block;}

JavaScript

$(".expand").click(function() {
            var state = $(this).children("div").hasClass("minus");
         // alert( state);
            if (state == true) {

                $(this).children("div").addClass("plus");
                $(this).children("div").removeClass("minus");
            } else {

                $(this).children("div").removeClass("plus");
                 $(this).children("div").addClass("minus");
            }
            //alert(state);
             $(this).parents(".header").next("#collapse").toggle();
            //var state = $(this).parents(".header").next(".body").hasClass("toggle");
        });