Dynamically changing active link class on collapse in Bootstrap

Issue

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

Solution

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

Answered By – OJay

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.