JSFiddle - React, Tailwind, and code Playground

by Husen

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="sub-menu-1 panel-group" id="accordion">
							<div class="panel panel-default">
						  		<div class="panel-heading">
							      <h4 class="panel-title">
							        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
							        	FASHION
							        </a>
							      </h4>
						    	</div><!-- /.panel-heading -->
						    	<div id="collapseOne" class="panel-collapse collapse in">
							      <div class="panel-body">
							      	<ul class="list-normal sub-menu-list">
							      		<li>
							      			<a href="#">
							      				<i class="fa fa-chevron-right"></i>
							      				Man
							      			</a>
							      		</li>
							      		<li>
							      			<a href="#">
							      				<i class="fa fa-chevron-right"></i>
							      				Women
							      			</a>
							      		</li>
							      		<li>
							      			<a href="#">
							      				<i class="fa fa-chevron-right"></i>
							      				Children
							      			</a>
							      		</li>
							      		<li>
							      			<a href="#">
							      				<i class="fa fa-chevron-right"></i>
							      				Infants
							      			</a>
							      		</li>
							      	</ul><!-- /.sub-menu-list -->
							      </div>
						    	</div><!-- /#collapseOne -->
							</div><!-- /.panel -->
							<div class="panel panel-default">
								<div class="panel-heading">
							      <h4 class="panel-title">
							        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
							         SPORTS
							        </a>
							      </h4>
								</div><!-- /.panel-heading -->
								<div id="collapseTwo" class="panel-collapse collapse">
							    	<div...

CSS

i.fa-minus:before  { content:"-"; position:absolute; font-size:22px; width:30px; line-height:30px; text-align:center }
i.fa-minus { background:#CCC; height:30px; width:30px; display:block; float:right; }
i.fa-plus { background:#CCC; height:30px; width:30px; display:block; float:right; }
i.fa-plus:before  { content:"+"; position:absolute; font-size:22px; width:30px; line-height:30px; text-align:center }
h4 { float:left; }
.panel-heading { overflow:hidden; }

JavaScript

-$(document).ready(function(){
$(".collapse:not(.in)").prev().append("<i class='fa fa-plus'></i>");
$(".collapse.in").prev().append("<i class='fa fa-minus'></i>");
$('.panel-heading').click(function(){
	$(".collapse:not(.in)").parent().find('.panel-heading').find("i").addClass('fa-minus');
	$(".collapse:not(.in)").parent().find(this).find("i").removeClass('fa-plus');
	$(".collapse.in").parent().find('.panel-heading').find("i").addClass('fa-plus');
	$(".collapse.in").parent().find(this).find("i").removeClass('fa-minus');
});
});