Hide/Show video element based on button click with javascript

Question

Currently, I have HTML setup like this:

<video  autoplay="on" id="videoNohighlight" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/02/videonohighlight.mp4"></video>
<video  autoplay="on" id="video_Q1" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q1.mp4"></video>
<video  autoplay="on" id="video_Q2" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q2.mp4"></video>
<video  autoplay="on" id="video_Q3" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q3.mp4"></video>
<video  autoplay="on" id="video_Q4" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q4.mp4"></video>

<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q1">Q1</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q2">Q2</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q3">Q3</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q4">Q4</a>

and Javascript like this

function reply_click(clicked_id){
    var video = document.getElementById("video" + clicked_id);
    var videoNohighlight = document.getElementById("videoNohighlight");

    if (video.style.display === "none") {
        video.style.display = "block";
        videoNohighlight.style.display = "none";
    } else {
        video.style.display = "none !important"; 
    }               
}   

JSFiddle link: https://jsfiddle.net/7x82vsah/1/

If some one clicks on all of the buttons, the buttons are acting as toggles rather than, showing one video, then when the next button is clicked, hiding the previous video and showing the new one in its place. What needs to be changed to enable this?

Thanks

Answer 1

Currently when a button is pressed you are just showing or hiding that specific video but what needs to be done simultaneously is to hide all other videos when a specific video button is clicked. what you can do is add a class to all the video elements and loop through them whenever the button is clicked.

function reply_click(clicked_id){
  var videos = document.getElementsByClassName("video-tabs") // video-tabs is the class you give to all your video elements
  var videoNohighlight = document.getElementById("videoNohighlight");  
  for (var i=0; i<= videos.length -1; i++){
    if (videos[i].id == "video_"+clicked_id) {
      var isVisible = videos[i].style.display
      videos[i].style.display = isVisible === "none" ? "block" : "none";
      videoNohighlight.style.display = isVisible === "none" ? "block" : "none";
    } else {
      videos[i].style.display = "none";
    }
  }

}