I'm having trouble switching the active class to the top item within an open accordion section

Viewed 22

I'm stuck at the point of getting the active status to switch to the top item of the opened accordion tab. As you can see, the active item is stuck as the 'FF1' item in the first accordion section. I believe the issue is with the script at the bottom. I've thought about adding something about open versus closed sections or adjusting the active class itself. I'll admit java script is a weak spot for me. I've also noticed that a video will keep playing even after a new section is opened and a second video is started.

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    
      <!-- SET 1 -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading1">
          <h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">Functions and Features</a></h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
          <div class="panel-body">
            <div class="row">
              <div class="col-md-3">
                <div class="list-group">
                  <a class="list-group-item active tablinks" onclick="openBT1(event, 'FF1')" id="defaultOpen"><i class="fa fa-video-camera fa-fw" aria-hidden="true"></i>&nbsp; Initial Set-up / Login</a>
                  <a class="list-group-item tablinks" onclick="openBT1(event, 'FF2')"><i class="fa fa-video-camera fa-fw" aria-hidden="true"></i>&nbsp; Menu Navigation</a>
                </div>
              </div>
              <div class="col-md-9">
                <div style="margin-bottom:20px;" id="FF1" class="tabcontent">
                  <video controls="" id="BAT-ISL" disablepictureinpicture="" controlslist="nodownload"><source src="/tools/dhsbat/Auditor-Functions-Features-Initial-Setup.mp4" type="video/mp4"><track default="" kind="captions" label="English" src="/tools/dhsbat/Auditor-Functions-Features-Initial-Setup.vtt" srclang="en-us"></video>
                </div>
                <script>v = document.getElementById("BAT-ISL");v.textTracks[0].mode = "hidden";</script>
                <div style="margin-bottom:20px;" id="FF2" class="tabcontent">
                  <video controls="" id="BAT-MN" disablepictureinpicture="" controlslist="nodownload"><source src="/tools/dhsbat/Auditor-Functions-Features-Menu-Navigation.mp4" type="video/mp4"><track default="" kind="captions" label="English" src="/tools/dhsbat/Auditor-Functions-Features-Menu-Navigation.vtt" srclang="en-us"></video>
                </div>
                <script>v = document.getElementById("BAT-MN");v.textTracks[0].mode = "hidden";</script>            
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Set 1 -->
      <!-- Set 2 -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading2">
          <h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">Energy Audit</a></h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
          <div class="panel-body">
            <div class="row">
              <div class="col-md-3">
                <div class="list-group">
                  <a class="list-group-item active tablinks" onclick="openBT1(event, 'FF5')" id="defaultOpen"><i class="fa fa-video-camera fa-fw" aria-hidden="true"></i>&nbsp; Appliance and Plug</a>
                  <a class="list-group-item tablinks" onclick="openBT1(event, 'FF6')"><i class="fa fa-video-camera fa-fw" aria-hidden="true"></i>&nbsp; Building Envelope</a>
                </div>
              </div>
              <div class="col-md-9">
                <div style="margin-bottom:20px;" id="FF5" class="tabcontent">
                  <video controls="" id="BAT-EA-AP" disablepictureinpicture="" controlslist="nodownload"><source src="/tools/dhsbat/Auditor-Energy-Audit-Appliance-and-Plug.mp4" type="video/mp4"><track default="" kind="captions" label="English" src="/tools/dhsbat/Auditor-Energy-Audit-Appliance-and-Plug.vtt" srclang="en-us"></video>
                </div>
                <script>v = document.getElementById("BAT-EA-AP");v.textTracks[0].mode = "hidden";</script>
                <div style="margin-bottom:20px;" id="FF6" class="tabcontent">
                  <video controls="" id="BAT-EA-BE" disablepictureinpicture="" controlslist="nodownload"><source src="/tools/dhsbat/Auditor-Energy-Audit-Building-Envelope.mp4" type="video/mp4"><track default="" kind="captions" label="English" src="/tools/dhsbat/Auditor-Energy-Audit-Building-Envelope.vtt" srclang="en-us"></video>
                </div>
                <script>v = document.getElementById("BAT-EA-BE");v.textTracks[0].mode = "hidden";</script>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end Set 2 --> 
    </div>

<script>
function openBT1(evt, BName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(BName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
0 Answers
Related