Side Category HTML

 

<div class="col-md-3">
      <div class="left-sidebar heading">
            <h3><span>Category</span></h3>
            <div class="panel-group category-products" id="accordian"><!--category-productsr-->
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordian" href="#sportswear">
                      <span class="badge pull-right"><i class="fa fa-plus"></i></span>
                      Sportswear
                    </a>
                  </h4>
                </div>
                <div id="sportswear" class="panel-collapse collapse">
                  <div class="panel-body">
                    <ul>
                      <li><a href="#">T-shirt </a></li>
                      <li><a href="#">Track-suit </a></li>
                      <li><a href="#">Lower</a></li>
                      <li><a href="#">Shoes</a></li>
                      
                    </ul>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordian" href="#mens">
                      <span class="badge pull-right"><i class="fa fa-plus"></i></span>
                      Mens
                    </a>
                  </h4>
                </div>
                <div id="mens" class="panel-collapse collapse">
                  <div class="panel-body">
                    <ul>
                      <li><a href="#">T-shirt</a></li>
                      <li><a href="#">Shirt</a></li>
                      <li><a href="#">Shoes</a></li>
                      <li><a href="#">Jeans</a></li>
                      <li><a href="#">Pent</a></li>
                      <li><a href="#">Coat</a></li>
                      <li><a href="#">Watch</a></li>
                      
                    </ul>
                  </div>
                </div>
              </div>
              
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordian" href="#womens">
                      <span class="badge pull-right"><i class="fa fa-plus"></i></span>
                      Womens
                    </a>
                  </h4>
                </div>
                <div id="womens" class="panel-collapse collapse">
                  <div class="panel-body">
                    <ul>
                      <li><a href="#">Saree</a></li>
                      <li><a href="#">Kutri</a></li>
                      <li><a href="#">Suit</a></li>
                      <li><a href="#">Jewellery</a></li>
                      <li><a href="#">Western Wear</a></li>
                    </ul>
                  </div>
                </div>
              </div>

                  <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordian" href="#kids">
                      <span class="badge pull-right"><i class="fa fa-plus"></i></span>
                      Kids
                    </a>
                  </h4>
                </div>
                <div id="kids" class="panel-collapse collapse">
                  <div class="panel-body">
                    <ul>
                      <li><a href="#">Shoes</a></li>
                      <li><a href="#">School Bag</a></li>
                      <li><a href="#">Watch</a></li>
                      <li><a href="#">Fashion</a></li>
                      <li><a href="#">Party Wear</a></li>
                    </ul>
                  </div>
                </div>
              </div>


          
                  <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordian" href="#electronics">
                      <span class="badge pull-right"><i class="fa fa-plus"></i></span>
                      Electronics
                    </a>
                  </h4>
                </div>
                <div id="electronics" class="panel-collapse collapse">
                  <div class="panel-body">
                    <ul>
                      <li><a href="#">Mobile</a></li>
                      <li><a href="#">Laptop</a></li>
                      <li><a href="#">LED</a></li>
                      <li><a href="#">Cameras</a></li>
                      <li><a href="#">Headphones</a></li>
                    </ul>
                  </div>
                </div>
              </div>
          
            </div>

--------------------------CSS---------------------------

.category-products {
  border: 1px solid #F7F7F0;
  margin-bottom: 35px;
  padding-bottom: 20px;
  padding-top: 15px;
}




.category-products .panel {
  background-color: #FFFFFF;
  border: 0px;
  border-radius: 0px;
  box-shadow:none;
  margin-bottom: 0px;
}

.category-products .panel-default .panel-heading {
  background-color: #FFFFFF;
  border: 0 none;
  color: #FFFFFF;
  padding: 5px 20px;
}

.category-products .panel-default .panel-heading .panel-title a {
  color: #696763;

  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
}
.pull-right {
    float: right !important;
}
.panel-group .panel-heading + .panel-collapse .panel-body {
  border-top: 0 none;
}

.category-products .badge {
  background:none;
  border-radius: 10px;
  color: #696763;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  min-width: 10px;
  padding: 3px 7px;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}

.panel-body ul{
  padding-left: 20px;
}


.panel-body ul li a {
  color: #696763;

  font-size: 12px;
  text-transform: uppercase;
}