Automatically Select First Tab and Content onload

JavaScript
1

So I’m working with this script that works great but am struggling to get it to display the first content piece onload. So basically I want the tab ‘Car Accidents’ and its respective content to display when the page loads.

<script>
function openService(evt, serviceName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  if (serviceName === 'Car Accidents') {

    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "block";
    }
  
   } else {
  
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
     document.getElementById(cityName).style.display = "block";
   }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
document.getElementById(serviceName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

<ul class="tab">
<li class="tablinks active" onmouseover="openService(event, 'Car Accidents')"><a href="/fishers-most-reliable-car-accident-lawyer/">Car Accidents</a></li>
<li class="tablinks" onmouseover="openService(event, 'Motorcycle Accidents')"><a href="#">Motorcycle Accidents</a></li>
<li class="tablinks" onmouseover="openService(event, 'Truck Accidents')"><a href="#">Truck Accidents</a></li>
<li class="tablinks" onmouseover="openService(event, 'Pedestrian Accidents')"><a href="#">Pedestrian Accidents</a></li>
<li class="tablinks" onmouseover="openService(event, 'Wrongful Accidents')"><a href="#">Wrongful Death</a></li>
<li class="tablinks" onmouseover="openService(event, 'Dog Bites')"><a href="#">Dog Bites</a></li>
</ul>

<div class="et_pb_column et_pb_column_1_2 et_pb_column_8  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div id="Car Accidents" class="et_pb_with_border et_pb_module et_pb_image et_pb_image_2 tabcontent" style="display: none;">
				
				
				
				
				<span class="et_pb_image_wrap "><img src="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/car-accident-service.jpg" alt="car accident service" title="" srcset="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/car-accident-service.jpg 900w, https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/car-accident-service-480x534.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 900px, 100vw" class="wp-image-237125" width="900" height="1001"></span>
			</div><div id="Motorcycle Accidents" class="et_pb_with_border et_pb_module et_pb_image et_pb_image_3 tabcontent" style="display: none;">
				
				
				
				
				<span class="et_pb_image_wrap "><img src="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/motorcycle-accident-service-1.jpg" alt="motorcycle accident service" title="" srcset="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/motorcycle-accident-service-1.jpg 900w, https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/motorcycle-accident-service-1-480x534.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 900px, 100vw" class="wp-image-237127" width="900" height="1001"></span>
			</div><div id="Truck Accidents" class="et_pb_with_border et_pb_module et_pb_image et_pb_image_4 tabcontent" style="display: none;">
				
				
				
				
				<span class="et_pb_image_wrap "><img src="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/truck-accident-service-1.jpg" alt="truck accident service" title="" srcset="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/truck-accident-service-1.jpg 900w, https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/truck-accident-service-1-480x534.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 900px, 100vw" class="wp-image-237129" width="900" height="1001"></span>
			</div><div id="Pedestrian Accidents" class="et_pb_with_border et_pb_module et_pb_image et_pb_image_5 tabcontent" style="display: none;">
				
				
				
				
				<span class="et_pb_image_wrap "><img src="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/pedestrian-accident-services.jpg" alt="pedestrian accident services" title="" srcset="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/pedestrian-accident-services.jpg 900w, https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/pedestrian-accident-services-480x534.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 900px, 100vw" class="wp-image-237135" width="900" height="1001"></span>
			</div><div id="Wrongful Accidents" class="et_pb_with_border et_pb_module et_pb_image et_pb_image_6 tabcontent" style="display: none;">
				
				
				
				
				<span class="et_pb_image_wrap "><img src="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/wrongful-death-service.jpg" alt="wrongful death service" title="" srcset="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/wrongful-death-service.jpg 900w, https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/wrongful-death-service-480x534.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 900px, 100vw" class="wp-image-237136" width="900" height="1001"></span>
			</div><div id="Dog Bites" class="et_pb_with_border et_pb_module et_pb_image et_pb_image_7 tabcontent" style="display: none;">
				
				
				
				
				<span class="et_pb_image_wrap "><img src="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/dog-bites-service.jpg" alt="dog bites service" title="" srcset="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/dog-bites-service.jpg 900w, https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/dog-bites-service-480x534.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 900px, 100vw" class="wp-image-237134" width="900" height="1001"></span>
			</div>
			</div>

.tab {width:100%;height:100%;padding:0!important;}
.tab .tablinks {display: block;background-color: transparent;width: 100%;border: none;outline: none;text-align: left;cursor: pointer;}
.tab .tablinks a{display:block;padding:1.7vw 40px 1.7vw 0px;border-bottom:1px solid #82888d;}
.tab .tablinks a:hover{border-bottom:1px solid transparent;}
.tab .tablinks:hover {background-color: #2b9eff;}
.tab .tablinks.active {background-color: #2b9eff;color:#fff!important;}
.tab .tablinks.active > a{color:#fff!important;}
.tabcontent {float: left;padding: 0px;display: none;width:100%;height:100%;animation: fadesIn 0.5s;}

Thank you ahead of time!

2

First let’s tidy up some sins.

The tab links should not use inline event attributes. That is mixing JavaScript in with your HTML and is best to be avoided.

Instead, remove those onmouseover inline event attributes:

<ul class="tab">
  <li class="tablinks active"><a href="/fishers-most-reliable-car-accident-lawyer/">Car Accidents</a></li>
  <li class="tablinks"><a href="#">Motorcycle Accidents</a></li>
  <li class="tablinks"><a href="#">Truck Accidents</a></li>
  <li class="tablinks"><a href="#">Pedestrian Accidents</a></li>
  <li class="tablinks"><a href="#">Wrongful Death</a></li>
  <li class="tablinks"><a href="#">Dog Bites</a></li>
</ul>

and let JavaScript do what it’s good at:

const tablinks = document.querySelectorAll(".tablinks");
tablinks.forEach(function addTabEvent(tab) {
    tab.addEventListener("mouseover", function tabMouseoverHandler(evt) {
        const serviceName = tab.innerText;
        openService(evt, tab.innerText);
    });
});

Because Wrongful Deaths has a different service name of Wrongful Accidents, we can add some data on to that tab, and have the scripting code prefer to use that different data instead.

  <li class="tablinks" data-service-name="Wrongful Accidents"><a href="#">Wrongful Death</a></li>

    tab.addEventListener("mouseover", function tabMouseoverHandler(evt) {
        const serviceName = tab.dataset.serviceName || tab.innerText;
        openService(evt, tab.innerText);
    });

We can now check if the tab is the first tab in the list, and trigger the mousover event.

// tablinks.forEach(function addTabEvent(tab) {
tablinks.forEach(function addTabEvent(tab, index) {
    ...
    if (index === 0) {
        tab.dispatchEvent(new Event("mouseover"));
    }
});

Here’s the extra script code to add, and don’t forget to remove those inline event attributes.

const tablinks = document.querySelectorAll(".tablinks");
tablinks.forEach(function addTabEvent(tab, index) {
    tab.addEventListener("mouseover", function tabMouseoverHandler(evt) {
        const serviceName = tab.dataset.serviceName || tab.innerText;
        openService(evt, tab.innerText);
    });
    if (index === 0) {
        tab.dispatchEvent(new Event("mouseover"));
    }
});
3

Thank you, @Paul_Wilkins, for taking the time to help me with this. However, even after implementing your code and making the mods you suggested, I’m still at square one. I am not getting the content to display after hovering over the tabs. There are no errors popping up in the Debugger. I’ll continue to attempt make this functional, but I figured I’d let you know on the status.

4

Here’s the code running in a sandbox. https://jsfiddle.net/62evczt0/

It seems to work for me there, so next steps from here are to take a closer look at your own updated code.

5

Thank you for that. I’m looking at right now.

6

Thanks, @Paul_Wilkins, but I’m still not getting the same results. I’ll DM you a link to the site.

7

You have placed the script in the middle of the HTML code. Do not mix HTML and JavaScript code.

The script is running before anything it cares about its lower in the HTML page exists, so can’t find what it needs. Move the script down to just before the the end of the body tag.

8

Hi,

The HTML, might be easier to read if it was formatted.

<ul class="tab">
  <li class="tablinks active"><a href="/fishers-most-reliable-car-accident-lawyer/">Car Accidents</a></li>
  <li class="tablinks"><a href="#">Motorcycle Accidents</a></li>
  <li class="tablinks"><a href="#">Truck Accidents</a></li>
  <li class="tablinks"><a href="#">Pedestrian Accidents</a></li>
  <li class="tablinks" data-service-name="Wrongful Accidents"><a href="#">Wrongful Death</a></li>
  <li class="tablinks"><a href="#">Dog Bites</a></li>
</ul>

<div class="et_pb_column et_pb_column_1_2 et_pb_column_8  et_pb_css_mix_blend_mode_passthrough">
  <div 
    id="Car Accidents" 
    class="et_pb_with_border et_pb_module et_pb_image et_pb_image_2 tabcontent hidden" 
  >
    <span class="et_pb_image_wrap ">
      <img 
        src="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/car-accident-service.jpg" 
        alt="car accident service" 
        title="" 
        srcset="https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/car-accident-service.jpg 900w, https://slgaccidentstg.wpengine.com/wp-content/uploads/2022/09/car-accident-service-480x534.jpg 480w" 
        sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 900px, 100vw" 
        class="wp-image-237125" 
        width="900" 
        height="1001"
      >
    </span>
  </div>
</div>

<div 
  id="Motorcycle Accidents" 
  class="et_pb_with_border et_pb_module et_pb_image et_pb_image_3 tabcontent hidden"
>
</div>

It was only through doing that, that I could see you had missing closing div tags.

Instead of setting a style of ‘block’ or ‘none’, I would recommend using a class instead e.g.

.hidden {
  display: none;
}

This can then be added or removed from the element using toggle.

This way you can shorten your openService function to something more like this.

function openService(event, serviceName) {

  const tabContent = document.querySelectorAll('.tabcontent');
  const tabLinks = document.querySelectorAll('.tabLinks');
  const showTabs = (serviceName !== 'Car Accidents'); // true or false
  
  tabContent.forEach((tab) => {
  	tab.classList.toggle('hidden', showTabs /* force parameter */) 
  })


  // this could possibly be done with toggle too
  tabLinks.forEach((tablink) => {
  	tabLink.classList.remove('active') 
  })

  event.currentTarget.classList.add('active')
}

I would also avoid using !important tags in your css. Instead rely on specificity. That way !important tags can be used for debugging instead.

Sorry I haven’t tested this script, it’s just a rough outline. I need to go out for a bit and I am short on time.

1 Like
9

Thank you for the heads up. Even so, it’s still not functioning as per your example because once I mouseover anything else other than the ‘Car Accidents’ tab, it errors out with

Uncaught TypeError:
document.getElementById(…) is null
openService https://…/wp-content/themes/…/tabselector.js?ver=6.0.2:15
tabMouseoverHandler https://…/wp-content/themes/…/tabselector.js?ver=6.0.2:15
addTabEvent https://…/wp-content/themes/…/tabselector.js?ver=6.0.2:15
https://…/wp-content/themes/…/tabselector.js?ver=6.0.2:15

The script is running in the footer after jQuery loads but it seems to not identify the IDs in place for the content to load.

10

It seems that more elements than intended are having that mouseover event attached to them. Further investigation needs to occur.

Can you please put together a reduced test page that shows the same problem, and direct us to it?

11

I’ve managed to find the cause of the break, which is VERY strange (your code does work, by the way—THANK YOU for spending so much time helping me with this):

If I attempt to use caps lock for the tab text or use css style text-transform: uppercase, everything breaks and then goes to the error of how it cannot identify the element ID. I was baffled for hours trying to figure out why the code kept breaking! So now that I found out the cause, I’m going to troubleshoot that issue.

Thank you, again, for your help!

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.