Accordion click function

Hi All,

I trying to replace the background color of Accordion on click function, but I need to replace the color on anchor tag.

currently colors are replacing when I click anywhere on accordion, I need the color should change when I click anchor tag then only the color of that accordion should replace.

click function which I wrote to replace the color:

<script type="text/javascript">
    $(document).ready(function(){
    
    $('.panel-heading').click(function(){
        $('.panel-heading').removeClass('highlight');
        
        $(this).addClass('highlight');
    })
    
    })
</script>

I hope I am clear in writing my doubt…

your early reply would appreciated…

Thanks

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

<style>
#accordion .highlight {
    background:#F6860C;
        color:#fff;
}

.nav-icon-products{
    background:url(../img/mp-sprite-icons.png) no-repeat 0 0;
    width:30px;
    height:30px;
    position:relative;
    top:0px; 
    display:inline-block;
    vertical-align:middle;
    }

.nav-icon-products.finance{
    background-position:0px -30px;
    }
.highlight .nav-icon-products.finance{
    background-position:0px 0px;
    }

.nav-icon-products.forex{
    background-position:-29px -0px;
    }
.highlight .nav-icon-products.forex{
    background-position:-29px -30px;
    }
    
.nav-icon-products.hr{
    background-position:-58px -0px;
    }
.highlight .nav-icon-products.hr{
    background-position:-58px -30px;
    }    

.nav-icon-products.tim{
    background-position:-87px -0px;
    }
.highlight .nav-icon-products.tim{
    background-position:-87px -30px;
    }

.nav-icon-products.visa{
    background-position:-116px -0px;
    }
.highlight .nav-icon-products.visa{
    background-position:-116px -30px;
    }

.nav-icon-products.corporate-services{
    background-position:-145px -0px;
    }
.highlight .nav-icon-products.corporate-services{
    background-position:-145px -30px;
    }

.nav-icon-products.travel-desk{
    background-position:-174px -0px;
    }
.highlight .nav-icon-products.travel-desk{
    background-position:-174px -30px;
    }   

</style>
</head>
<body>

<img src="/community/uploads/default/18528/9eae74be64f550ed.png" width="204" height="59"> 

<div class="panel-group panel-group_" id="accordion" style="border-top:0px;">
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_ highlight">
                                  <h4 class="panel-title">
                                  
                                  <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                      <i class="indicator nav-icon-products finance"></i>
                                      Finance
                                      <i class="indicator1 glyphicon glyphicon-chevron-up pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in">
                                  <div class="panel-body">
                                     <div class="col-md-4 panel-body_">
                                        <div class="form-group">
                                          <label class="control-label" for="passwordinput">Location :
                                          <span style="font-weight:normal"> 1st Floor</span>
                                          </label>
                                        </div>
                                  
                                        <div class="form-group">
                                          <label class="control-label" for="passwordinput">Email :
                                          <span style="font-weight:normal"> xyz@techmahindra.com</span>
                                          </label>
                                        </div>
                                  
                                        <div class="form-group">
                                          <label class="control-label" for="passwordinput">Extn :
                                          <span style="font-weight:normal"> 00000</span>
                                          </label>
                                        </div>
                                     </div>
                                  
                                     <div class="col-md-4 panel-body_" style="border:0px solid #000">
                                         <p><strong>Locate Finance Dept.:</strong></p>
                                         <a href="#"><img src="img/poll.png" alt="" width="200" height="100"></a>
                                     </div>
                                </div>
                              </div>
                            </div>
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                      <i class="indicator nav-icon-products forex"></i>
                                      Forex
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse">
                                  <div class="panel-body ">
                                    <div class="col-md-12 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>
                              
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                      <i class="indicator nav-icon-products hr"></i>
                                      HR
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseThree" class="panel-collapse collapse">
                                  <div class="panel-body">
                                    <div class="col-md-12 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>
                              
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                                      <i class="indicator nav-icon-products tim"></i>
                                      TIM
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseFour" class="panel-collapse collapse">
                                  <div class="panel-body">
                                    <div class="col-md-12 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>
                              
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
                                      <i class="indicator nav-icon-products visa"></i>
                                      Visa
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseFive" class="panel-collapse collapse">
                                  <div class="panel-body">
                                    <div class="col-md-12 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>
                              
                               <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
                                      <i class="indicator nav-icon-products corporate-services"></i>
                                      Corporate Services
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseSix" class="panel-collapse collapse">
                                  <div class="panel-body">
                                    <div class="col-md-12 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>
                              
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">
                                      <i class="indicator nav-icon-products travel-desk"></i>
                                      Travel Desk
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseSeven" class="panel-collapse collapse">
                                  <div class="panel-body">
                                    <div class="col-md-12 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>
                    </div>    

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<!-- Latest compiled and minified JavaScript --> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script>            
function toggleChevron(e) {
      $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('finance forex');
        
        $('#accordion .panel-heading').removeClass('highlight');
        $(e.target).prev('.panel-heading').addClass('highlight');        
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

function toggleChevron1(e) {
      $(e.target)
        .prev('.panel-heading')
        .find('i.indicator1')
        .toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
        
}
$('#accordion').on('hidden.bs.collapse', toggleChevron1);
$('#accordion').on('shown.bs.collapse', toggleChevron1);

        
</script>

<script type="text/javascript">
    $(document).ready(function(){
    
    $('.panel-heading').click(function(){
        $('.panel-heading').removeClass('highlight');
        
        $(this).addClass('highlight');
    
    
    })
    
    })
</script>

</body>
</html>

Can you clarify which colours you want to change?

At the moment if you click the icon on the right the gray bar chnages to orange (and toggles the accordion also). You have also add a click to the top bar so that when you click the gray bar it turns to orange also.

I’m unclear of what you are trying to achieve here as I don’t believe you want the gray bar to be orange when clicked. If you do want that to happen then you should perhaps also open the accordion which would then make that toggle link redundant.

Or were you trying to change the background color of the main accordion content? If so you should do that from within the same routine that toggles the accordion.

If you can clarify what should be changing then I can offer some alternative code :slight_smile:

Thanks for your reply Paul,

I need to change the color when I click on Anchor tag Text “Finance, forex, HR, TIM” etc.
currently what happening if I click anywhere on accordion bar clolor is changing as per my js code,
I need to change the accordion background color change i.e. “class- Highlight” when I will click on anchor text.

I tried below changes it works but on click on text accordion background color is not changing.

Hope my point is clear to you now…

Thanks once again…

Hi,

I’m still not clear on what you want as you already seem to be doing what you want without that new routine you added.

If you are trying to make the topbar turn orange as soon as its clicked rather than waiting until its opened then you could do this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

<style>
#accordion .highlight {
    background:#F6860C;
        color:#fff;
}

.nav-icon-products{
    background:url(../img/mp-sprite-icons.png) no-repeat 0 0;
    width:30px;
    height:30px;
    position:relative;
    top:0px; 
    display:inline-block;
    vertical-align:middle;
    }

.nav-icon-products.finance{
    background-position:0px -30px;
    }
.highlight .nav-icon-products.finance{
    background-position:0px 0px;
    }

.nav-icon-products.forex{
    background-position:-29px -0px;
    }
.highlight .nav-icon-products.forex{
    background-position:-29px -30px;
    }
    
.nav-icon-products.hr{
    background-position:-58px -0px;
    }
.highlight .nav-icon-products.hr{
    background-position:-58px -30px;
    }    

.nav-icon-products.tim{
    background-position:-87px -0px;
    }
.highlight .nav-icon-products.tim{
    background-position:-87px -30px;
    }

.nav-icon-products.visa{
    background-position:-116px -0px;
    }
.highlight .nav-icon-products.visa{
    background-position:-116px -30px;
    }

.nav-icon-products.corporate-services{
    background-position:-145px -0px;
    }
.highlight .nav-icon-products.corporate-services{
    background-position:-145px -30px;
    }

.nav-icon-products.travel-desk{
    background-position:-174px -0px;
    }
.highlight .nav-icon-products.travel-desk{
    background-position:-174px -30px;
    }   

</style>
</head>
<body>

<img src="/community/uploads/default/18528/9eae74be64f550ed.png" width="204" height="59"> 

<div class="panel-group panel-group_" id="accordion" style="border-top:0px;">
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_ highlight">
                                  <h4 class="panel-title">
                                  
                                  <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                      <i class="indicator nav-icon-products finance"></i>
                                      Finance
                                      <i class="indicator1 glyphicon glyphicon-chevron-up pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in">
                                  <div class="panel-body">
                                     <div class="col-md-4 panel-body_">
                                        <div class="form-group">
                                          <label class="control-label" for="passwordinput">Location :
                                          <span style="font-weight:normal"> 1st Floor</span>
                                          </label>
                                        </div>
                                  
                                        <div class="form-group">
                                          <label class="control-label" for="passwordinput">Email :
                                          <span style="font-weight:normal"> xyz@techmahindra.com</span>
                                          </label>
                                        </div>
                                  
                                        <div class="form-group">
                                          <label class="control-label" for="passwordinput">Extn :
                                          <span style="font-weight:normal"> 00000</span>
                                          </label>
                                        </div>
                                     </div>
                                  
                                     <div class="col-md-4 panel-body_" style="border:0px solid #000">
                                         <p><strong>Locate Finance Dept.:</strong></p>
                                         <a href="#"><img src="img/poll.png" alt="" width="200" height="100"></a>
                                     </div>
                                </div>
                              </div>
                            </div>
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                      <i class="indicator nav-icon-products forex"></i>
                                      Forex
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse">
                                  <div class="panel-body ">
                                    <div class="col-md-12 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>
                              
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                      <i class="indicator nav-icon-products hr"></i>
                                      HR
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseThree" class="panel-collapse collapse">
                                  <div class="panel-body">
                                    <div class="col-md-12 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>
                              
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                                      <i class="indicator nav-icon-products tim"></i>
                                      TIM
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseFour" class="panel-collapse collapse">
                                  <div class="panel-body">
                                    <div class="col-md-12 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>
                              
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
                                      <i class="indicator nav-icon-products visa"></i>
                                      Visa
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseFive" class="panel-collapse collapse">
                                  <div class="panel-body">
                                    <div class="col-md-12 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>
                              
                               <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
                                      <i class="indicator nav-icon-products corporate-services"></i>
                                      Corporate Services
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseSix" class="panel-collapse collapse">
                                  <div class="panel-body">
                                    <div class="col-md-12 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>
                              
                              <div class="panel panel-default">
                                <div class="panel-heading panel-heading_">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">
                                      <i class="indicator nav-icon-products travel-desk"></i>
                                      Travel Desk
                                      <i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
                                    </a>
                                  </h4>
                                </div>
                                <div id="collapseSeven" class="panel-collapse collapse">
                                  <div class="panel-body">
                                    <div class="col-md-12 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>
                    </div>    

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<!-- Latest compiled and minified JavaScript --> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script>            
$(document).ready(function(){ 
	$('#accordion').on( "click", ".accordion-toggle", function() {
		 var theTarget = $(this).closest('.panel-heading');
		 $('#accordion .panel-heading').removeClass('highlight');
     theTarget.addClass('highlight');
		 theTarget.find('i.indicator').toggleClass('finance forex');
		 theTarget.find('i.indicator1').toggleClass('glyphicon-chevron-up glyphicon-chevron-down');   		
		});    
 })
</script>
</body>
</html>

I moved all those functions into one as you didn’t need separate ones.

If the above is not what you wanted then explain how it should work differently.:slight_smile: