JSFiddle - React, Tailwind, and code Playground

by krish reddy

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

h4{
  float: left;
    margin-right: 10px;
}
i.fa{
    position: relative;
    bottom: 1px;
}
.list-normal{
    list-style: none;
    padding-left: 0px;
}

JavaScript

$(".panel-heading + .collapse:not(.in)").prev().append("<i class='fa fa-plus'></i>");
$(".panel-heading + .collapse.in").prev().append("<i class='fa fa-minus'></i>");