JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/fronteed/iCheck/master/icheck.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <input type="checkbox" class="item3">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        <label>
            Sample 1
           </label>
          
          <br>
          <br>
      </div>
    </div>
  </div>
</div>

CSS

.new-option-content{
    min-height:100px;
    border:solid 1px #eaeaea;
    margin-bottom:20px;
}
.checkbox-default, .radio-default {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background: url(http://i.imgur.com/3Duxl8T.png) no-repeat;
    border: none;
    cursor: pointer;
}
.checkbox-default {
    background-position: 0 0;
}
.checkbox-default.hover {
    background-position: -20px 0;
}
.checkbox-default.checked {
    background-position: -40px 0;
}

JavaScript

$(".panel").on("show.bs.collapse", function() {
debugger;
 var checkbox = $(this).find("input[type='checkbox']");
 $(this).addClass("checkbox-checked");
 checkbox.prop("checked", true);
});

$(".panel").on("hidden.bs.collapse", function() {
debugger;
 var checkbox = $(this).find("input[type='checkbox']");
 checkbox.prop("checked", false);
});