how to target nearby anchor

how to target nearby anchor

I have multiple accordions.  If I have a link in one that anchors to text in another I need the destination accordion to open and for the + icon to switch to a - icon.  I've got the accordion to open but am having trouble with removing the class that the changes the icon.

Here is my html:

  1. <div class="panel panel-default" id="accordion11">
                               <div class="panel-heading" role="tab" id="headingaccordion11">
                                  <h2><a data-toggle="collapse" data-parent="#accordion1" href="#collapseaccordion11" aria-expanded="false" aria-controls="collapseaccordion11" class="collapsed"><span class="glyphicon glyphicon-plus-minus no-print" aria-hidden="true"></span>ID accordion11</a></h2>
                               </div>
                               <div id="collapseaccordion11" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingaccordion11">
                                  <p><a id="section-1"></a>This is some text that is going to link to&nbsp; content in <a href="#section-2">Accordion 12</a></p>
                               </div>
                            </div>
                            <div class="panel panel-default" id="accordion12">
                               <div class="panel-heading" role="tab" id="headingaccordion12">
                                  <h2><a data-toggle="collapse" data-parent="#accordion1" href="#collapseaccordion12" aria-expanded="false" aria-controls="collapseaccordion12" class="collapsed"><span class="glyphicon glyphicon-plus-minus no-print" aria-hidden="true"></span>ID accordion12</a></h2>
                               </div>
                               <div id="collapseaccordion12" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingaccordion12">
                                  <p><a id="section-2"></a>The link in&nbsp;Accordion 11&nbsp;goes to here.
                                  </p>
                               </div>
                            </div>


And here is my jquery.  I've left in some of my attempts that didn't work and have commented them out. What I'm trying to do is remove the class="collapsed"  of the anchor that is wrapped by the h2.

  1. $("a[href^='#section']").click(function() {
      var div = $(this).attr('href'); //works
      $('.in').collapse('hide');  //works
      $(div).closest('.panel-collapse').addClass('in'); //works
     
     
      //$('a.collapsed').removeClass('collapsed');  this changes all of the icons
    //$(div).closest('a.collapsed').removeClass('collapsed');   didn't work
  2.  
     // $(div).closest('.panel-heading').find('a.collapsed').removeClass('collapsed'); didn't work

     
    // $('div#headingaccordion12 > a.collapsed').removeClass('collapsed'); failed effort to target the anchor explicitly.
    //$(div).closest('a.collapsed').removeClass('collapsed'); didnt work

    //$(div).closest('a.collapsed').css('font-weight:bold;'); failed effort to target the anchor element with some css
     // $(div).closest('p').css('color:red');  failed effort to target the anchor element with some css
     
     
     
    $('html,body').animate({scrollTop: $(div).offset().top -65},1000);       
       
     });