<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="panel-title expand"> <div class="right-arrow pull-right">+</div> <a href="#">Home Area 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse" style=" padding: 10px; "> <label class="checkbox-inline"> <input type="checkbox" value="">Option 1 </label> <label class="checkbox-inline"> <input type="checkbox" value="">Option 2 </label> <label class="checkbox-inline"> <input type="checkbox" value="">Option 3 </label> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="panel-title expand"> <div class="right-arrow pull-right">+</div> <a href="#">Home Area 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse" style=" padding: 10px; "> <label class="checkbox-inline "> <input type="checkbox" value="">Option 1 </label> <label class="checkbox-inline"> <input type="checkbox" value="">Option 2 </label> <label class="checkbox-inline"> <input type="checkbox" value="">Option 3 </label> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="panel-title expand"> <div class="right-arrow pull-right">+</div> <a href="#">Home Area 3</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse" style=" padding: 10px; "> <label class="checkbox-inline"> <input type="checkbox" value="">Option 1 </label> <label class="checkbox-inline"> <input type="checkbox" value="">Option 2 </label> <label class="checkbox-inline"> <input type="checkbox" value="">Option 3 </label> </div> </div> </div> </div>

$(function() { $(".expand").on( "click", function() { // $(this).next().slideToggle(200); $expand = $(this).find(">:first-child"); if($expand.text() == "+") { $expand.text("-"); } else { $expand.text("+"); } }); });