Dynamically changing active link class on collapse in Bootstrap

Question

I am hoping to make my code dynamic for each collapse item.

Right now, I have to add JQuery code for each collapse item to change the active link. I am hoping that through some way, I don't have to add any additional code when the links are added.

Here is the HTML

<div class="panel-group" id="accordion">

      <div class="filter-nav"><span class="filter-list">-</span>Filter By<span id="filter-close">X</span></div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title" id="panel-title1">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">
                    First Link
                  </a>
                </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body">
                  Hello world 1
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title active-panel" id="panel-title2" data-title="2">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="">
                    Second Link
                  </a>
                </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse in" style="height: auto;">
                <div class="panel-body">
                    <form class="industry">
                      <input type="checkbox" name="industry" value="Aerospace" id="Aerospace"><label for="Aerospace"><span></span>Aerospace &amp; Defense</label>
                      <input type="checkbox" name="industry" value="Agriculture" id="Agriculture"><label for="Agriculture"><span></span>Agriculture</label>
                      <input type="checkbox" name="industry" value="Automotive" id="Automotive"><label for="Automotive"><span></span>Automotive &amp; Assembly</label>
                      <input type="checkbox" name="industry" value="Materials" id="Materials"><label for="Materials"><span></span>Basic Materials</label>

                    </form>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title" id="panel-title3" data-title="3">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed">
                    Third Link
                  </a>
                </h4>
              </div>
              <div id="collapseThree" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body">
                  Hello world 3
                </div>
              </div>
            </div>


            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title" id="panel-title4">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" class="collapsed">
                    Forth Link
                  </a>
                </h4>
              </div>
              <div id="collapseFour" class="panel-collapse collapse">
                <div class="panel-body">
                  Hello world 4
                </div>
              </div>

        </div>

</div>

JQUERY Code

$('#collapseOne').on('show.bs.collapse', function () {
  $("#panel-title1").addClass("active-panel");
});

$('#collapseOne').on('hide.bs.collapse', function () {
  $("#panel-title1").removeClass("active-panel");
});

$('#collapseTwo').on('show.bs.collapse', function () {
  $("#panel-title2").addClass("active-panel");
});

$('#collapseTwo').on('hide.bs.collapse', function () {
  $("#panel-title2").removeClass("active-panel");
});

$('#collapseThree').on('show.bs.collapse', function () {
  $("#panel-title3").addClass("active-panel");
});

$('#collapseThree').on('hide.bs.collapse', function () {
  $("#panel-title3").removeClass("active-panel");
});

$('#collapseFour').on('show.bs.collapse', function () {
  $("#panel-title4").addClass("active-panel");
});

$('#collapseFour').on('hide.bs.collapse', function () {
  $("#panel-title4").removeClass("active-panel");
});

It works fine, but I am just hoping to make my JS code dynamic.

Thanks

Answer 1

    .not-opened-label,.opened-label{
        display: none;
    }
    a[aria-expanded="false"] .not-opened-label{
        display: inline;
    }
    a[aria-expanded="true"] .opened-label{
        display: inline;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="collapseFour" class="panel-collapse collapse">
    <div class="panel-body">
      Hello world 4
    </div>
</div>
<a data-toggle="collapse" data-target="#collapseFour" aria-expanded="false">
    <span class="not-opened-label">show details</span>
    <span class="opened-label">hide details</span>
    
</a>

Answer 2

Something like:

$('.panel-collapse').on('show.bs.collapse',function(){
    $(this).prev('.panel-heading').find('.panel-title').addClass("active-panel");
});

$('.panel-collapse').on('hide.bs.collapse',function(){
    $(this).prev('.panel-heading').find('.panel-title').removeClass("active-panel");
});

to avoid hardwiring in ids, but is dependent on the HTML structure