custom icon(plus-circle & minus-circle) not working on default expanded panel - Bootstrap

Question

Since I have let the first panel opened by default. I have added minus-circle for opened panel and plus-circle for rest of all closed panel. but, the minus-circle didn't work on default opened panel. i want to show minus-circle for opened panel & plus-circle for rest of all closed panel.

jQuery(function($) {
        var $active = $('#accordion .panel-collapse.in').prev().find('a').addClass('actives');
        $active.find('a').append('<span class="fa fa-minus-circle pull-right"></span>');
        $('#accordion .panel-heading').not($active).find('a').prepend('<span class="fa fa-plus-circle pull-right"></span>');
        $('#accordion').on('show.bs.collapse', function(e) {
            $('#accordion .panel-heading.actives').removeClass('actives').find('.fa').toggleClass('fa-plus-circle fa-minus-circle');
            $(e.target).prev().find('a').addClass('actives').find('.fa').toggleClass('fa-plus-circle fa-minus-circle');
        });
        $('#accordion').on('hide.bs.collapse', function(e) {
            $(e.target).prev().find('a').removeClass('actives').find('.fa').removeClass('fa-minus-circle').addClass('fa-plus-circle');
        });
    });

.new-buying-requirements{
  background-color: #F7F7F7;
}
.panel-group .panel {
    border-radius: 0;
  }
.new-requirements-panel-title {
    font-size: 2.28em;
    font-family: 'montserrat';
  }
.panel-heading{
  padding: 0px;
}
  .panel-title > a {
    display: block;
    padding: 20px;
    text-decoration: none;
    background-color: #fff;
    color: #383F42;
  }

  .more-less {
    float: right;
  }

  .panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
  }
  .actives{
    background-color: #1E6C97 !important;
    color: #fff !important;
  }
  .panel-group .panel+.panel{
    margin-top: 15px;
  }
  .new-requirements-panel-group {
    margin-bottom: 60px;
    margin-top: 60px;
}
.media-lft{
  padding-top: 5px;
  padding-right: 16px;
}
.media-lft>img{
  border: 1px solid #ccc;
}
.media-heading{
  color: #1E6C97;
}
.buying-requirement-media-body>p{
  margin-bottom: 0px;
  font-family: 'montserrat';
  font-size: 1.28em;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="new-buying-requirements">
 <div class="container-fluid">
  <div class="row">
   <div class="col-sm-12">
    <div aria-multiselectable="true" class="panel-group new-requirements-panel-group" id="accordion" role="tablist">
     <div class="panel panel-default new-requirements-panel">
      <div class="panel-heading new-requirements-panel-heading" id="headingOne" role="tab">
       <h4 class="panel-title new-requirements-panel-title"><a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">Requirements</a></h4>
      </div>
      <div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
       <div class="panel-body new-requirements-panel-body">
        
        <div class="media">
         <div class="media-left media-lft"><img align="middle" class="media-object" src="https://cdn.paperindex.com/piimages/flags/United-Kingdom.jpg" style="width:45px; height: 30px;"></div>
         <div class="media-body buying-requirement-media-body">
          <p>A buyer from [Leeds], [UK]</p>
          <p>posted their [<a class="lnk" data-original-title="" href="#" title="">AKD Emulsions</a>] requirement inviting suppliers to submit quotations</p>
         </div>
        </div>
       </div>
      </div>
     </div>
     <div class="panel panel-default new-requirements-panel">
      <div class="panel-heading new-requirements-panel-heading" id="headingTwo" role="tab">
       <h4 class="panel-title new-requirements-panel-title"><a aria-controls="collapseTwo" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo" role="button">Quotations</a></h4>
      </div>
      <div aria-labelledby="headingTwo" class="panel-collapse collapse" id="collapseTwo" role="tabpanel">
       <div class="panel-body new-requirements-panel-body">
        
        <div class="media">
         <div class="media-left media-lft"><img align="middle" class="media-object" src="https://cdn.paperindex.com/piimages/flags/United-Kingdom.jpg" style="width:45px; height: 30px;"></div>
         <div class="media-body buying-requirement-media-body">
          <p>A buyer from [UK]</p>
          <p>requested a quotation from [<a class="lnk" data-original-title="" href="#" title="">99Corporate Inc</a>] in [Beijing], [China]</p>
         </div>
        </div>
       </div>
      </div>
     </div>
     <div class="panel panel-default new-requirements-panel">
      <div class="panel-heading new-requirements-panel-heading" id="headingThree" role="tab">
       <h4 class="panel-title new-requirements-panel-title"><a aria-controls="collapseThree" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseThree" role="button">Supplier</a></h4>
      </div>
      <div aria-labelledby="headingThree" class="panel-collapse collapse" id="collapseThree" role="tabpanel">
       <div class="panel-body new-requirements-panel-body">
        <div class="media">
         <div class="media-left media-lft"><img align="middle" class="media-object" src="https://cdn.paperindex.com/memberlogos/1225_logo_beta.jpg" style="width:45px; height: 30px;"></div>
         <div class="media-body buying-requirement-media-body">
          <p>[<a class="lnk" data-original-title="" href="#" title="">VBX Ltd</a>] from [Indonesia] <img align="middle" height="15" src="https://cdn.paperindex.com/piimages/flags/Indonesia.jpg" width="20"></p>
         </div>
        </div>
        
         <div class="media-body buying-requirement-media-body">
          <p>[<a class="lnk" data-original-title="" href="#" title="">iPaper Inc</a>] from [UK] <img align="middle" height="15" src="https://cdn.paperindex.com/piimages/flags/United-Kingdom.jpg" width="20"></p>
         </div>
        </div>
       </div>
      </div>
     </div>
     <div class="panel panel-default new-requirements-panel">
      <div class="panel-heading new-requirements-panel-heading" id="headingFour" role="tab">
       <h4 class="panel-title new-requirements-panel-title"><a aria-controls="collapseFour" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseFour" role="button">Products</a></h4>
      </div>
      <div aria-labelledby="headingFour" class="panel-collapse collapse" id="collapseFour" role="tabpanel">
       <div class="panel-body new-requirements-panel-body">
        <div class="media">
         <div class="media-left media-lft"><img align="middle" class="media-object" src="https://cdn.paperindex.com/productimages/1075_22052007070008_pic.jpg" style="width:45px; height: 30px;"></div>
         <div class="media-body buying-requirement-media-body">
          <p>[<a data-original-title="" href="#" title="">Kraft Paper</a>] details were added by <a data-original-title="" href="#" title="">KBX Ltd</a> to their company profile</p>
         </div>
        </div>
        
        <div class="media">
         <div class="media-left media-lft"><img align="middle" class="media-object" src="https://cdn.paperindex.com/productimages/0_22112016080604_pic.jpg" style="width:45px; height: 30px;"></div>
         <div class="media-body buying-requirement-media-body">
          <p>[<a data-original-title="" href="#" title="">V-belt</a>] details were added by <a data-original-title="" href="#" title="">ABC Paper Pvt Ltd</a> to their company profilV-belte</p>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div><!-- panel-group -->
   </div>
  </div>
 </div>
</div>

checkout this answer http://stackoverflow.com/a/39012302/2724173 — Ismail Farooq, Apr 18 '17 at 13:03
it's not working fine. I think what is asked is on load the first panel's (minus/plus) identifier should be set to minus but now it comes as plus. — Cengiz Araz, Apr 18 '17 at 13:04
There should be minus-circle icon on opened panel. Plus-circle icon would be there now. — PKPrabu, Apr 18 '17 at 13:05
Possible duplicate of [Get the element that was collapsed on hidden/shown.bs.collapse](http://stackoverflow.com/questions/36482863/get-the-element-that-was-collapsed-on-hidden-shown-bs-collapse) — Ismail Farooq, Apr 18 '17 at 13:19
@IsmailFarooq - By default, the first panel is opened. so i want to show minus-circle instead of plus-circle. — PKPrabu, Apr 18 '17 at 19:23
@IsmailFarooq - Thank you :) But, this is not what i wanted. If i click any panel in the group, only that panel should be opened & others should be closed. Please look through my fiddle. — PKPrabu, Apr 22 '17 at 05:00

score 0 · Answer 1 · answered Apr 18 '17 at 13:04

change HTML Put the span like below I add and check it

<a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">Requirements <span class="fa fa-minus-circle pull-right"></span></a>

Visit below link I just made it for first

https://jsfiddle.net/ay0g6w6t/1/

score 0 · Answer 2 · answered Apr 22 '17 at 07:43

here is best way to do this.

$('[data-toggle="collapse"]').click(function(){
 $(this).children(".glyphicon").toggleClass("glyphicon-arrow-down glyphicon-arrow-up")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1 <i class="glyphicon glyphicon-arrow-up"></i>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2 <i class="glyphicon glyphicon-arrow-down"></i>
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3 <i class="glyphicon glyphicon-arrow-down"></i>
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

For instance, Please click the second panel directly & then click third panel. Now see the first & second panel. the arrow up icon will be there. It shouldn't be like that. instead, arrow down icon should be there. what i wanted is, up arrow for opened panel & down arrow for closed panels. — PKPrabu, Apr 22 '17 at 10:15

custom icon(plus-circle & minus-circle) not working on default expanded panel - Bootstrap

2 Answers2