javascript - How to add a plus or minus sign to accordion in bootstrap? display plus when accordion is closed, minus when accord

I was trying to add plus and minus to bootstrap accordion, which shows plus when the div that shows content is open and minus when closed and also when I open second tab it should close contents of the other tabs which is open(this currently happening) and also it should change the minus icon to plus icon of the tabs other than active tab.

Anyone who can e with the solution or approach is greatly appreciated :).

enter code here
<h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading panel-heading-custom">
     <h4 class="panel-title panel-title-custom">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
    </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse in">
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading panel-heading-custom">
    <h4 class="panel-title panel-title-custom">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
    </h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading panel-heading-custom">
    <h4 class="panel-title panel-title-custom">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
    </h4>
  </div>
  <div id="collapse3" class="panel-collapse collapse">
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
  </div>
</div>

jquery code

<script>

$(document).ready(function() {
 $('.panel-title-custom').addClass('glyphicon glyphicon-plus');

 $('.panel-title-custom').click(function(){
    $(this).toggleClass('glyphicon-plus glyphicon-minus'); 

  });

});

</script>

Anyone who can e with the solution or approach is greatly appreciated :).

enter code here
<h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading panel-heading-custom">
     <h4 class="panel-title panel-title-custom">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
    </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse in">
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading panel-heading-custom">
    <h4 class="panel-title panel-title-custom">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
    </h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading panel-heading-custom">
    <h4 class="panel-title panel-title-custom">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
    </h4>
  </div>
  <div id="collapse3" class="panel-collapse collapse">
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
  </div>
</div>

jquery code

<script>

$(document).ready(function() {
 $('.panel-title-custom').addClass('glyphicon glyphicon-plus');

 $('.panel-title-custom').click(function(){
    $(this).toggleClass('glyphicon-plus glyphicon-minus'); 

  });

});

</script>

Share Improve this question asked Aug 29, 2016 at 7:08 Deepak 3151 gold badge6 silver badges18 bronze badges

Show what you have already tried and give some better examples. – Black Commented Aug 29, 2016 at 7:10
Please check this link: stackoverflow./questions/16773724/… – Novice Commented Aug 29, 2016 at 7:20

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

There is no need to use jQuery or javascript for this. simple 5 lines of css can do this for you. For bootstrap accordion one attribute called aria-expanded="true"/aria-expanded="false" will be getting added to the accordion heading. you add can css according to that. see this codepen example

.accordion-btn {
 position: relative;
}
.accordion-btn:before {
 position: absolute;
 content: "+";
 right: 10px;
 top: 5px;
}
.accordion-btn[aria-expanded="true"]:before {
 content: "-"; }

Here you go working code.

$('#accordion')
  .on('show.bs.collapse', function(e) {   
     $(e.target).prev('.panel-heading-custom').find('div').removeClass('glyphicon glyphicon-plus');        
     $(e.target).prev('.panel-heading-custom').find('div').addClass('glyphicon glyphicon-minus');   
  })
  .on('hide.bs.collapse', function(e) {
   $(e.target).prev('.panel-heading-custom').find('div').removeClass('glyphicon glyphicon-minus');
   $(e.target).prev('.panel-heading-custom').find('div').addClass('glyphicon glyphicon-plus');   
  });

Check the below JSFiddle

JSFIDDLE

$('.panel-title > a').click(function() {
  $(this).parents('.panel-default').find('i').toggleClass('fa-plus fa-minus');
  $(this).parents('.panel-default').siblings('.panel-default').find('i').removeClass('fa-minus').addClass('fa-plus')

});

<link href="https://stackpath.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />




<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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <i class="accordion_icon fa fa-minus"></i> Collapsible Group Item #1
        </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" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <i class="accordion_icon fa fa-plus"></i> Collapsible Group Item #2
        </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" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <i class="accordion_icon fa fa-plus"></i>Collapsible Group Item #3
        </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>

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to add a plus or minus sign to accordion in bootstrap? display plus when accordion is closed, minus when accord

3 Answers 3

与本文相关的文章

评论列表(0)