In the corner of my webpage, I have three tabs: info, question, order. When I click on one tab header, only that tab should highlight. The info section includes two buttons that link to the question and order tabs. When these buttons are pressed, the respective tab is displayed correctly but doesn't highlight as intended.
If you want to see the issue in action, please visit this URL where you can find the 3 tabs on the right side of the page:
I attempted to use a Bootstrap code to solve the problem, but it wasn't very successful.
Your help with this matter would be highly appreciated!
<script>
function openProductTab(evt, tabName) {
var i, tabcontent, openProductTab;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tabProductLinks = document.getElementsByClassName("tabProductLinks");
for (i = 0; i < tabProductLinks.length; i++) {
tabProductLinks[i].className = tabProductLinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>/*----------------------*/
/*---Produkttabbar------*/
/*----------------------*/
.tabProdukter {
overflow: auto;
}
/*----------tab button---------*/
.tabProducts button{
color:#1e84d8;
/*margin-bottom: 0 px;*/
background-color: #e7f6ff;
float: left;
cursor: pointer;
transition: 0.1s;
width:33%;
border-top: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
border-right: none;
border-bottom: 1px solid #20a3eb;
}
.tabProducts button:hover{
color: white;
background-color:#20a3eb;
}
.tabProducts button.active {
color:#1e84d8;
width: 33%;
background-color: white;
border-top: 1px solid #20a3eb;
border-left: 1px solid #20a3eb;
border-right: 1px solid #20a3eb;
border-bottom: none;
}
.tabProducts button.active:hover{
color: #20a3eb;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 0px 0px;
}
.tabcontent ul{
margin-left:0px;
}
.tabcontent li{
list-style:none;
}
.tabcontent h3{
border-bottom:dotted;
border-bottom-width: 1px;
border-color: #20a3eb;
text-align:left;
padding-top:20px;
padding-bottom:5px;
margin-bottom:5px;
font-size:18px;
}
.tabcontent h4{
color:#515151;
}<div class="tabProducts" id="ProductInformationTabs">
<button class="tabProductLinks" onclick="openProductTab(event, 'produktinformation')" id="defaultOpen">[icon name="info-circle" class="" unprefixed_class=""] Info</button><button class="tabProductLinks" onclick="openProductTab(event, 'flerFragor',)">[icon name="question-circle" class="" unprefixed_class=""] Frågor</button><button class="tabProductLinks" onclick="openProductTab(event, 'bestallNu')">[icon name="shopping-cart" class="" unprefixed_class=""] Beställ</button>
</div>
<div id="produktinformation" class="tabcontent">
<ul>
<li><h3>[icon name="info-circle" class="" unprefixed_class=""] Produktinformation</h3></li>
<li>[icon name="clock-o" class="blue1ColorClass" unprefixed_class=""] Leveranstid: <span style="color: #1e84d8;">1-2 veckor</span></li>
<li>[icon name="arrow-circle-o-down" class="blue1ColorClass" unprefixed_class=""] Minsta antal: <span style="color: #1e84d8;">100 st</span></li>
<li>[icon name="adjust" class="blue1ColorClass" unprefixed_class=""] Färger: [icon name="circle" class="blueColorClass" unprefixed_class=""] [icon name="circle" class="redColorClass" unprefixed_class=""] [icon name="circle" class="greenColorClass" unprefixed_class=""] [icon name="circle" class="blackColorClass" unprefixed_class=""]</li>
<li><a href="http://webb.io/swebrush/wp-content/uploads/tandborstar_tryckmall_för_profiltryck.pdf">[icon name="download" class="blue2ColorClass alignright" unprefixed_class=""]</a> Mall för nedladdning: <a href="http://webb.io/swebrush/wp-content/uploads/tandborstar_tryckmall_för_profiltryck.pdf"><span style="color: #1e84d8;">Tandborstar.pdf</a></span></li>
</ul>
<ul>
<li><h4>Är du intresserad av att beställa produkten?</h4></li>
<li><button class="buttonDefault" onclick="openProductTab(event, 'flerFragor','defaultOpen')">Jag har fler frågor [icon name="question-circle" class="" unprefixed_class=""]</button></li>
<li><button class="buttonOrderClass" onclick="openProductTab(event, 'bestallNu')">Beställ nu' [icon name="shopping-cart" class="" unprefixed_class=""]</button></li>
</ul>
</div>
<div id="flerFragor" class="tabcontent">
<ul>
<li><h3>[icon name="question-circle" class="" unprefixed_class=""] Jag har några frågor först</h3></li>
<li>Att beställa profilprodukter på webben är inte alltid en dans på rosor. Vilken tur att vi har duktiga personer som gärna assisterar dig i din beställning. Skicka in dina funderingar via kontaktformuläret så återkommer rätt person till dig! Du kan även ringa oss på , maila till <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1dac4dfd5c2d4c3c7d8d2d4f1c1c3d4dfd5de9fc2d4">[email protected]</a> eller skriva till oss direkt i chatten när den är bemannad.[contact-form-7 id="6" title="KONTAKTA OSS"]</li>
</ul>
</div>
<div id="bestallNu" class="tabcontent">
<ul>
<li><h3>[icon name="shopping-cart" class="" unprefixed_class=""] Beställ nu</h3></li>
<li>Nu är du ett steg närmre! Välj önskad variant och antal och lägg sedan till produkten i varukorgen. Känner du dig osäker och behöver hjälp får du gärna kontakta oss.[contact-form-7 id="6" title="KONTAKTA OSS"]</li>
</ul>
</div>