Automatically Select First Tab and Content onload – JavaScript – SitePoint

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!

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")); }
});

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.

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.

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

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

Techyrack Website stock market day trading and youtube monetization and adsense Approval

Adsense Arbitrage website traffic Get Adsense Approval Google Adsense Earnings Traffic Arbitrage YouTube Monetization YouTube Monetization, Watchtime and Subscribers Ready Monetized Autoblog

from Web Development – My Blog https://ift.tt/kEoTImJ
via IFTTT