On my page i have some custom links(tabs). on clicking respective link its content is shown. By default the first tab class is selected and its content is shown rest are set to display:none; clicking any other link will result in assigning class selected to it and setting it to display:block; and rest to display:none;. Here is the html when page loads.
Html
<div class="vtabs">
<a href="#tab-order" class="selected">Order Details</a> // by default its class is selected
<a href="#tab-payment">Payment Details</a>
<a href="#tab-shipping">Shipping Details</a>
<a href="#tab-product">Products</a><a href="#tab-history">History</a>
<a id="label_tab" href="#tab-label">HX Endicia Labels</a>
</div>
<div id="tab-order" class="vtabs-content" style="display: block;">Tab1</div>
<div id="tab-payment" class="vtabs-content" style="display: none;">Tab2</div>
<div id="tab-shipping" class="vtabs-content" style="display: none;">Tab3</div>
<div id="tab-product" class="vtabs-content" style="display: none;">Tab4</div>
<div id="tab-label" class="vtabs-content" style="display: none;">Tab5</div>
What i want is to have a check that if some given condition is true than load the last tab on page load. like
Html
<div class="vtabs">
<a href="#tab-order">Order Details</a>
<a href="#tab-payment">Payment Details</a>
<a href="#tab-shipping">Shipping Details</a>
<a href="#tab-product">Products</a><a href="#tab-history">History</a>
<a id="label_tab" href="#tab-label" class="selected">HX Endicia Labels</a>
</div>
<div id="tab-order" class="vtabs-content" style="display: block;">Tab1</div>
<div id="tab-payment" class="vtabs-content" style="display: none;">Tab2</div>
<div id="tab-shipping" class="vtabs-content" style="display: none;">Tab3</div>
<div id="tab-product" class="vtabs-content" style="display: none;">Tab4</div>
<div id="tab-label" class="vtabs-content" style="display: none;">Tab5</div>
For this i did some thing like this in my view file but didn't work. iam getting this error in console "Uncaught TypeError: Cannot set property 'className' of null"
<script type="text/javascript">
function run(){
alert('testing');
document.getElementById('label_tab').className = 'selected';
document.getElementById('tab-label').style.display = 'block';
}
function hideAllTabs() {
var tab_contents = document.getElementsByClassName('vtabs-content');
for (var i = 0; i < tab_contents.length; ++i) {
tab_contents.style.display = 'none';
}
}
<?php
if (!isset($labeltab)) {
echo "hideAllTabs();";
echo "run();";
}
?>
</script>